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; }
需要全部禁用时,全选按钮隐藏;不需要全部禁用时,全选按钮展示。这样 也可以达到业务需求。