Skip to content

设置el-table表头全选框隐藏

问题描述

在开发公司的管理系统时,需要隐藏el-table表头的全选框。

解决方案

1、给el-table设置表头属性header-cell-class-name

vue
<el-table
  :data="tableData"
  :header-cell-class-name="leftheaderStyle"
  style="width: 100%">
</el-table>

2、在页面的methods方法里写一个对应的方法

vue
leftheaderStyle({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    <!-- 第一列时添加一个类名 -->
    return 'seltAllbtnDis'
  }
}

3、给类名设置隐藏样式

css
.el-table .seltAllbtnDis .cell {
  visibility: hidden;
}

完成以上设置就可以实现需求了。

参考链接

设置el-table表头全选框隐藏或禁用

Designed & Powerd by liujun