ElementPlus表格中的背景透明

栀椩2023-10-22 19:05

ElementPlus表格中的背景透明

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

直接上代码：

vue 复制代码

<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>

效果如下：