问题: 当表格数据复选框皆为禁用状态时, 全选的复选框仍可勾选, 此时应将其禁用
思路:
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'
}
},
<style lang="less" scoped>
::v-deep .all-disabled .el-checkbox__input .el-checkbox__inner {
background-color: #edf2fc;
border-color: #dcdfe6;
cursor: not-allowed;
}
</style>