vue element-ui 对表格的单元格边框加粗

超凌2025-08-28 12:07

客户方有个需求，需要将表格单元格，大单元格边框加深，里面的边框颜色不变，从而区分单元格与单元格的边界线，效果如图

根据组件和效果分析下实现思路：不合并单元格的td（1，2），有下边框，右侧边框；合并单元格的3，只有右侧边框

实现过程：接口返回的全部数据经过分类处理后，并按规则排序聚合处理，数据如下

xml 复制代码

<template>
    <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        :cell-class-name="cellClassName"
        border
      >
     </el-table>
</template>
<script>
tableData = [
    { id: 0, data: 'data0'},
    { id: 1, data: 'data1'},
    { id: 1, data: 'data2'},
    { id: 1, data: 'data3'},
    { id: 2, data: 'data2'},
    { id: 2, data: 'data2'},
    { id: 3, data: 'data3'},
]

spanArr = [
    1,
    3,
    0,
    0,
    2,
    0,
    1
]

// 合并函数
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // 设置被合并的列
    if (columnIndex < 2) {
        const _row = this.spanArr[rowIndex]; // 合并行数
        return {
            rowspan: _row,
            colspan: 1,
        };
    }
}
// 自定义cell-class
cellClassName({ row, column, rowIndex, columnIndex }) {
    // 设置被合并的列
    if (columnIndex < 2) {
        return "right_bottom_border";
    } else {
        const curSpan = this.spanArr[rowIndex];
        const nextSpan = this.spanArr[rowIndex + 1];

        if (curSpan == 1) {
            // 等于1，非合并单元格，展示 右、下边框
            return "right_bottom_border";
        }
        if (curSpan == 0 && nextSpan > 0) {
            // 仅仅 当前行是0，下一行数据非0，说明当前是合并单元格的最后一个，加上下、右边框
            return "right_bottom_border";
        }
        if (curSpan > 1) {
            // 大于1，是合并单元格的第一个，下边框不加，加右侧边框
            return "right_border";
        }
        // 等于0的，是合并单元格的数据，上面去除了合并单元格的最后一个
        return "right_border";
    }
}
</script>
<style>
.right_bottom_border {
    border-right: 1px solid #aaa !important;
    border-bottom: 1px solid #aaa  !important;
}
.right_border {
    border-right: 1px solid #aaa !important;
}
</style>

最后，在加上表格的左边的和顶部的一个边框搞定