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

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

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

代码:

<el-table
  ref="tableEl":header-cell-class-name="setClassName"// 省略其他无关代码</el-table>computed:{/**
 * 计算属性 isAllDisabled 表数据是否全部不可选
 */isAllDisabled(){returnthis.table.dataList.every((el)=> el.checkDisabled ==true)},},/**
 * 设置表头单元格类名
 */setClassName({ column }){// 若为选择框,且数据皆为不可选时if(column.type =='selection'&&this.isAllDisabled){return'all-disabled'}},

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