【项目经验】：elementui表格中表头的多选框换成文字

一.项目需求

        表格可以多选，表头都是汉字。。。。类似于这种

        

二.实现功能

• 用到的方法

Table Attributes

参数	说明	类型	可选值	默认值
header-cell-class-name	表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex})/String	—	—

• 实现代码（可复制直接跑）

HTML部分

js部分

css部分

实现后的效果图

三.总结

关键代码

// 在表格上绑定header-cell-class-name属性

// 在methods中判断确定是第一列然后给对应的class名
cellClass (row) {
            // 判断第几列
            if (row.columnIndex === 0) {
                return "disableSelection";
            }
        }
// css做对应修改

// 隐藏多选框表头
::v-deep.el-table .disableSelection .cell .el-checkbox__inner {
    display: none;
    position: relative;
}
// 替换后的表头内容（根据需求自行设置）
::v-deep.el-table .disableSelection .cell::before {
    content: "选项";
    position: absolute;
    right: 15px;
}

大家有啥更好的方法评论区留言