当前位置：首页 > news >正文

ElementPlus表格中的背景透明

news 2025/9/15 9:37:37

ElementPlus表格中的背景透明

最近写大屏，用到elementplus中的el-table，为了让显示效果好看一点，需要把表格的白色背景调整为透明，与整个背景融为一体。可以参考的资料非常少，大部分都是ElmentUI的方法，在某个前端开发群里问了一下解决方案，大佬给出的解决方案直接让我拍案叫绝，记录一下，以后翻起来更容易

直接上代码：

<template><el-table :data="tableData" height="300" :row-style="rowstyle"><el-table-column v-for="(item, index) in tableForm" :key="index" :prop="item.prop" :label="item.label"show-overflow-tooltip></el-table-column></el-table>
</template><script setup>
import { ref, onMounted, toRefs } from 'vue'
// import { getHighwayTrafficApi } from '@/apis/predictTraffic'const tableForm = [{ prop: 'road_name', label: '路名', width: 20 },{ prop: 'section_desc', label: '堵点', width: 40 },{ prop: 'speed', label: '速度', width: 20 },{ prop: 'status', label: '状态', width: 20 },{ prop: 'congestion_distance', label: '长度', width: 20 },{ prop: 'congestion_trend', label: '趋势', width: 20 },]const props = defineProps({tableData: Array
})const rowstyle = ({ row, rowIndex }) => {if (rowIndex % 2 === 0) {return {backgroundColor: 'rgba(3, 76, 106, 1)',}}
}</script><style lang="scss" scoped>
.el-table {--el-table-border-color: transparent;--el-table-border: none;--el-table-text-color: #bdbdbe;--el-table-header-text-color: #bdbdbe;--el-table-row-hover-bg-color: transparent;--el-table-current-row-bg-color: transparent;--el-table-header-bg-color: transparent;--el-table-bg-color: transparent;--el-table-tr-bg-color: transparent;--el-table-expanded-cell-bg-color: transparent;
}
</style>

效果如下：