ElementPlus表格中的背景透明解决方案

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

<div class="topTable">       
    <el-table :data="state.tableData" class="tableSpec" height="100%" >
        <el-table-column prop="date" label="名称" align="center" show-overflow-tooltip/>
        <el-table-column prop="ss" label="次数" align="center"/>
        <el-table-column prop="name" label="概率" align="center"/>
        <el-table-column prop="address" label="总数" align="center"/>              
        <el-table-column prop="address" label="状态" align="center" show-overflow-tooltip>
            <template #default="scope">
                <span style="color:#5AEE93">
                   {{ scope.row.address }}
                </span>
            </template>
        </el-table-column>
    </el-table>
</div>

.topTable{
    height: 70%;
    margin: 0.05rem 0;
    .tableSpec{
        width: 100%;
        --el-table-border-color: rgba(222, 253, 255, 0.16);
     }
     :deep(.el-table){
        background-color: transparent;
     }
     :deep(.el-table__expanded-cell){
        background-color: transparent;
     }
     :deep(.el-table th){
        background-color: rgba(0, 238, 246, 0.08) !important;
        color: #00FFFF;
        font-size: 0.06rem;
     }
     :deep(.el-table tr){
        background-color: transparent !important;
        color: #FFFFFF;
     }
     :deep(.el-table td){
        background-color: transparent !important;
     }
     .el-table__fixed::before{
        background-color: transparent;
     }
}