elementui 解决el-table多选 禁用时隐藏全选按钮

场景:在查看信息时,我们一般会禁用全部行的多选按钮,只能查看,不能进行操作。

问题:这里,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;
}

结果:全选按钮在禁用事被隐藏

这样问题是大概解决了,但是并不优。

要是能够实现既能识别出是未选、半选还是全选中状态,又能禁用该全选按钮,就更好了。

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值