el-table整体换色

52 阅读1分钟

问题

在给el-table换色的时候可能会写很多无用css,大量v-deep影响后续代码查看与维护。

::v-deep .el-table{
    background-color:var(--background-color);
    border:1px solid var(--table-border-color);
    .el-table__header-wrapper th{
        color:var(--font-color);
        background: var(--table-head-color);
        border:none;
    }
    .el-table__body-wrapper{
        tr{
            border:none;
        }
        td{
            color:var(--font-color);
            background:var(--background-color)!important;//防止移动变色问题
            border:none;
        }
    }
}
//如果还有白边
::v-deep .el-table::before,::v-deep .el-table--border:after{
    background-color:var(--background-color);
}

如果有更好的方案欢迎评论区指出,非常感谢!