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;
}
结果:全选按钮在禁用事被隐藏
这样问题是大概解决了,但是并不优。
要是能够实现既能识别出是未选、半选还是全选中状态,又能禁用该全选按钮,就更好了。
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
1 年前
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 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)