el-table 多选框变单选框，隐藏全选框_el-table单选禁掉全选的按钮

1.多选变单选方案:

<el-table ref="table"  @selection-change="handleSelectionChange">
</el-table>
1
2

handleSelectionChange(selection) {
    if(selection.length > 1){
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(selection.pop())
      }
    },
1
2
3
4
5
6

2.隐藏全选框
html

<el-table
      v-loading="loading"
      ref="table"
      @selection-change="handleSelectionChange"
      :header-cell-class-name="cellClass"
    >
1
2
3
4
5
6

js

    cellClass(row){     
      if (row.columnIndex === 0&&this.fromTag == 'dialog') {           
        return 'disabledCheck'     
      }
    }
1
2
3
4
5

css样式

/* 去掉全选按钮 */
::v-deep .el-table .disabledCheck .cell .el-checkbox__inner{
    display: none; 
}

::v-deep .el-table .disabledCheck .cell::before{
    content: '选择';
    text-align: center;
    line-height: 37px;
}
1
2
3
4
5
6
7
8
9
10

参靠:https://www.cnblogs.com/JinXinYuan/p/12165027.html