ElementUI的表格怎么删除全选框

今天刚接收了需求老师的新的界面图,发现有的表格取消了全选的功能。
一、实现效果
在这里插入图片描述
二、实现方法
1.在<el-table>里添加

<el-table-column type="selection"  width="55">

2.此时表格里有单选框和多选框,在el-table里面添加cell-class-name属性

<el-table :data="tabData" border :header-cell-style="{ background: '#fafafa' }" :header-cell-class-name="cellClass">
cellClass(row) {
    
    
      if (row.columnIndex === 0) {
    
    //若是第一行,即全选框所在的那一行
        return 'disabledCheck'
      }
    },

表示给表头添加了一个class
3.设置class来隐藏全选框

.el-table /deep/.disabledCheck .cell .el-checkbox__inner {
    
    
  display: none !important;
}
.el-table /deep/.disabledCheck .cell:before {
    
    
  content: "";
  position: absolute;
  right: 11px;
}

Guess you like

Origin blog.csdn.net/qq_45791799/article/details/119638879