selectable方法-摩杜云开发者社区

复选框框架：通过调用selectable方法，进行禁用复选框。 <el-table v-loading="loading" :data="studentList" @selection-change="handleSelectionChange"> <\el-table> 1.指定行禁用：

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

2.条件禁用：

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

问题点：当条件数据全被禁用时，全选按钮不是禁用的状态。

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

实现:复选框全被禁用时，全选按钮将被隐藏

回避做法：加了一个:header-cell-class-name属性，通过调用cellClass方法，当全被禁用时，全选按钮将被隐藏。

<!-- 复选框禁用 -->
<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" />

实现：定义一个参数DisableSelection:true，实现全选禁用。

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

实现:全选按钮的隐藏样式：

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

实现:追加全选按钮隐藏函数cellClass，启用隐藏样式：

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

实现:复选框当存在不禁用时，重置DisableSelection属性值：

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

效果：全被禁用时，全选按钮被隐藏

实现:存在可选按钮场合：前两行可选。

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

效果：当存在可选时，全选按钮被表示出来