注意目录和修改相同的字符编码

element-ui中table组件的全选禁用遇到的坑?

elementui只提供了除全选之外其他复选框的禁用方法:

<el-table-column
                type="selection"
                width="80"
                align="center"
                :selectable="selectable"
></el-table-column>
// 禁用table中的复选框(不包括全选,false为禁用)
selectable () {
     return  false
},

这样复选框(除全选)会被禁用,呈置灰效果。

但全选依然可以点击,可以把全选禁用需求换成全选隐藏:

<el-table :header-cell-class-name="cellClass"  />
// table中全选按钮的隐藏
 cellClass () {
      if (this.disabled) {     // 此处可以根据需求做判断
        return 'selectAllbtnDis'
      }
},
::v-deep .selectAllbtnDis .cell .el-checkbox__inner {
  display: none;
}

需要全部禁用时,全选按钮隐藏;不需要全部禁用时,全选按钮展示。这样 也可以达到业务需求。

posted @ 2023-08-28 20:06  黑使  阅读(2176)  评论(0编辑  收藏  举报