table表头中，全选复选框的隐藏 或者删除某些行的复选框 或者按条件进行筛选_layui table 复选框隐藏

table表头中，全选复选框的隐藏，可以使用 :header-cell-class-name，例如：

<el-table border ref="multipleTable" 
   :header-cell-class-name="headerCellClass">
    <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
    <el-table-column prop="tmTitle" label="名称" min-width="120" show-overflow-tooltip> </el-table-column>
    <el-table-column  type="selection" width="45" v-bind:selectable="checkSelect"> </el-table-column>     
</el-table>
 
// js
headerCellClass(row){
   if (row.columnIndex === 3) { // 第三列表头加 class, 用样式去隐藏
   // 等于 0 的话就是删除表头的复选框（多选）
      return 'DisableSelection'
   }
},
 
//css
.DisableSelection > .cell {
  display: none !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

table内容，根据每一行数据显示或隐藏复选框，可以使用 :cell-class-name,例如：

<el-table border ref="multipleTable" 
   :cell-class-name="cellClass">
    <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
    <el-table-column prop="tmTitle" label="名称" min-width="120" show-overflow-tooltip> </el-table-column>
    <el-table-column  type="selection" width="45" v-bind:selectable="checkSelect"> </el-table-column>     
</el-table>
 
// js
cellClass(row){
   if (!row.row.name) {  // 根据某个属性，添加样式，隐藏复选框
      return 'myCell'
   }
},
 
//css
.myCell .el-checkbox__input{ 
  display: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18