场景:在查看信息时,我们一般会禁用全部行的多选按钮,只能查看,不能进行操作。
问题:这里,el-table被选中部分行,全选按钮还是会显示对勾,而不是半选中状态,容易使用户混淆。
![](https://img-blog.csdnimg.cn/img_convert/1d1f2ecfd912e7ee82c9aa1b5f3c6db8.png)
解决:隐藏全选按钮
在el-table加 :header-cell-class-name="cellClass"
<el-table
ref="multipleTable"
v-loading="loading"
:data="tableData.records"
v-bind="tableAttributes"
:reserve-selection="true"
:row-key="getRowKeys"
:header-cell-class-name="cellClass"
@selection-change="val => multipleSelection = val"
>
<el-table-column
type="selection"
align="center"
width="55"
:reserve-selection="true"
:selectable="() => !disabled"
/>
<!-- ......... -->
</table>
在methods加cellClass方法
/**
* 全选按钮隐藏
*/
cellClass(row) {
if (this.disabled && row.columnIndex === 0) {
return 'DisableSelection'
}
},
在css加样式
::v-deep .el-table .DisableSelection .cell .el-checkbox__inner{
display: none;
}
结果:全选按钮在禁用事被隐藏
![](https://img-blog.csdnimg.cn/img_convert/33c2bf5e9bb907b9e16bb9e3bb2bb056.png)
这样问题是大概解决了,但是并不优。
要是能够实现既能识别出是未选、半选还是全选中状态,又能禁用该全选按钮,就更好了。