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

原创已于 2024-12-03 18:33:52 修改 · 3.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-02-23 15:04:39 首次发布

文章介绍了如何在el-table中，当所有数据的复选框都禁用时，通过设置`header-cell-class-name`属性和计算属性`isAllDisabled`，使全选复选框变为不可点击并调整样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

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

解决思路:
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>