ElementUI中带复选框的el-table表格，去掉表头的全选框

ElementUI中带复选框的el-table表格，去掉表头的全选框在ElementUI中，带复选框的表格组件是长这样的：那么，如果不想要表头的全选框，该怎么修改呢？首先了解el-table的一个属性header-cell-class-name：表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。<el-table:data="t

Spongebob_nut

8394人浏览 · 2021-11-23 18:04:08

Spongebob_nut · 2021-11-23 18:04:08 发布

ElementUI中带复选框的el-table表格，去掉表头的全选框

在ElementUI中，带复选框的表格组件是长这样的：
在这里插入图片描述
那么，如果不想要表头的全选框，该怎么修改呢？
首先了解el-table的一个属性header-cell-class-name：表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。

                    <el-table
                        :data="tableData"
                        height="250"
                        :header-cell-style="{background:'#f4f3f9'}"
                        style="width: 100%"
                        :header-cell-class-name="cellClass"
                        @selection-change="handleSelectionChange"
                    >

表头类名的回调方法：cellClass()

        cellClass(row) {
            if (row.columnIndex === 0) {
                return 'disabledCheck';
            }
        }

可以看一下控制台输出的row的内容
在这里插入图片描述
这里我的表格共三列，所以columnIndex是从0到2，当row.columnIndex === 0时，给表头添加一个类disabledCheck

            // 深度选择器 去掉全选按钮
            ::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
                display: none;
            }

            ::v-deep .el-table .disabledCheck .cell::before {
                content: '';
                text-align: center;
                line-height: 37px;
            }