修改element默认border样式

关注

原创最新推荐文章于 2026-03-03 10:00:17 发布 886 阅读 AI 写同款· GEO 优化 ›

el-table分组后从大到小渲染颜色记录一下最近开发中遇到的一些问题，需求是将表格中数据分成三组，每一组按照从大到小去渲染颜色，并且最后两行不渲染。首先，来讲一下我的思路。 1.创建一个二维数组（包含三个一维数组，是按照我所需要分组的列对应的属性名） 2.表格数据嵌套二维数组进行循环把符合的值追加到arr数组中，进行排序改变单元格颜色（利用的是element-ui的表格中自带的方法） // 從大到小排序 sortDownData() { let groups = [ ["F3Total", "F 阅读详情

在这里插入图片描述

.el-table--border:after,.el-table--group:after,.el-table:before {
        background-color: #ccc;
    }
    .el-table--border,.el-table--group {
        border-color: #ccc;  
    }
    .el-table td,.el-table th.is-leaf {
        border-bottom: 1px solid #ccc;
    }
    .el-table--border th,.el-table--border th.gutter:last-of-type {
        border-bottom: 1px solid #ccc;
    }
    .el-table--border td,.el-table--border th {
        border-right: 1px solid #ccc;
    }
    .el-table td.el-table__cell{
        border-bottom: 1px solid #ccc;
    }
    .el-table--border .el-table__cell{
        border-right: 1px solid #ccc;
    }
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
        border-bottom: 1px solid #ccc;
    }
    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
        background: #eee;
    }