element-ui table uses type='selection' check box to disable all - select all to disable

Table of contents

Summary of the problem:  When the conditional data is all disabled, the select all button also becomes disabled instead of hidden. Some friends who can do it hope to follow up. Thanks!

Check box frame: Disable the check box by calling the selectable method.

1. Specify line to disable:

2. Conditionally disabled:

Problem point: When all conditional data is disabled, the select all button is not disabled.

When the checkboxes are all disabled, the select all button will be hidden 

Summary of the problem:  When the conditional data is all disabled, the select all button also becomes disabled instead of hidden. Some friends who can do it hope to follow up. Thanks!

---

Summary of the problem:  When the conditional data is all disabled, the select all button also becomes disabled instead of hidden. Some friends who can do it hope to follow up. Thanks!

Check box frame: Disable the check box by calling the selectable method.

<!-- 复选框禁用 -->
<el-table 
v-loading="loading" 
:data="studentList" 
@selection-change="handleSelectionChange"
>
    <el-table-column 
    type="selection" 
    width="55" 
    align="center"
    :selectable="selectable"
    />

    <el-table-column label="编号" align="center" prop="studentId" />

1. Specify line to disable:

    //复选框禁用
    selectable(row,rowIndex) {
      //索引是从0开始，条件1是指只有第2行数据不被禁用  
      if(rowIndex == 1){
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    }

Effect:

2. Conditionally disabled:

    //复选框禁用
    selectable(row,rowIndex) {
      //只有姓名【zhang】不被禁用
      if (row.studentName == "zhang") {
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    }

Effect:

Problem point: When all conditional data is disabled, the select all button is not disabled.

    //复选框全部禁用
    selectable(row,rowIndex) {
      return false;
    }

Effect:

When the checkboxes are all disabled, the select all button will be hidden 

Avoidance method: add a :header-cell-class-name attribute, by calling the cellClass method, when all are disabled, the select all button will be hidden.

<!-- 复选框禁用 -->
<el-table 
v-loading="loading" 
:data="studentList" 
:header-cell-class-name="cellClass"
@selection-change="handleSelectionChange"
>
    <el-table-column 
    type="selection" 
    width="55" 
    align="center"
    :selectable="selectable"
    />

    <el-table-column label="编号" align="center" prop="studentId" />

Realization: Define a parameter DisableSelection:true to realize all selection disabled.

export default {
  name: "Student",
  data() {
    return {
      // 全选按钮隐藏
      DisableSelection:true,
    }
  }
}

Append the hidden style of the select all button:

<style>
  .el-table .DisableSelection .cell .el-checkbox__inner{
          display: none;
          position: relative;
        }
  .el-table .DisableSelection .cell:before{
          content: "";
          position: absolute;
  }
</style>

Add the hidden function cellClass of the all-select button to enable the hidden style:

    //全选按钮隐藏
    cellClass(row){
      row.length
        console.log(row)
          if(this.DisableSelection){
            if (row.columnIndex === 0) {
              return 'DisableSelection'
            }
          }   
    },

When the check box exists and is not disabled, reset the value of the DisableSelection property:

    //复选框禁用
    selectable(row,rowIndex) {
      //所有行都被禁用
      if(rowIndex < 0){
        this.DisableSelection = false && this.DisableSelection;
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    },

Effect: When all is disabled, the select all button is hidden

 When there are optional buttons: the first two lines are optional.

    //复选框禁用
    selectable(row,rowIndex) {
      //前两行可选的状态
      if(rowIndex < 2){
        this.DisableSelection = false && this.DisableSelection;
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    },

When there is an option, the select all button is indicated

Summary of the problem:  When the conditional data is all disabled, the select all button also becomes disabled instead of hidden. Some friends who can do it hope to follow up. Thanks!