[Element UI] table 复选框全部禁用时实现全选禁用_el-table 禁用全选

问题: 当表格数据复选框皆为禁用状态时, 全选的复选框仍可勾选, 此时应将其禁用

思路:
el-table 添加属性 header-cell-class-name , 在属性的回调方法中遍历所有数据, 当数据全部禁用时, 返回 ‘all-disabled’ 类名, 用类的样式将选框置灰.

代码:

<el-table
  ref="tableEl"
  :header-cell-class-name="setClassName"
  // 省略其他无关代码
</el-table>

computed: {
/**
 * 计算属性 isAllDisabled 表数据是否全部不可选
 */
  isAllDisabled() {
    return this.table.dataList.every((el) => el.checkDisabled == true)
  },
},

/**
 * 设置表头单元格类名
 */
setClassName({ column }) {
  // 若为选择框,且数据皆为不可选时
  if (column.type == 'selection' && this.isAllDisabled) {
    return 'all-disabled'
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<style lang="less" scoped>
  ::v-deep .all-disabled .el-checkbox__input .el-checkbox__inner {
    background-color: #edf2fc;
    border-color: #dcdfe6;
    cursor: not-allowed;
  }
</style>
1
2
3
4
5
6
7