elementui 解决el-table多选 禁用时隐藏全选按钮
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
场景:在查看信息时,我们一般会禁用全部行的多选按钮,只能查看,不能进行操作。
问题:这里,el-table被选中部分行,全选按钮还是会显示对勾,而不是半选中状态,容易使用户混淆。
解决:隐藏全选按钮
在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;
}
结果:全选按钮在禁用事被隐藏
这样问题是大概解决了,但是并不优。
要是能够实现既能识别出是未选、半选还是全选中状态,又能禁用该全选按钮,就更好了。
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)