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

问题:这里,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
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
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 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐