element-ui table使用type='selection'复选框全禁用(全选禁用)详解

目录

• 问题总结：
• 复选框框架：
• 回避做法：
• 实现：
• 效果：全被禁用时，全选按钮被隐藏
• 问题总结： 
• 总结

问题总结：

 当条件数据全被禁用时，全选按钮也变成禁用的状态，而不是隐藏。有会做的小伙伴希望跟帖。谢谢！

复选框框架：

通过调用selectable方法，进行禁用复选框。

!-- 复选框禁用 -->
    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.指定行禁用：

    //复选框禁用    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;
  //禁用      }
    }
    ,

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

问题总结： 

当条件数据全被禁用时，全选按钮也变成禁用的状态，而不是隐藏。

总结

到此这篇关于element-ui table使用type='selection'复选框全禁用(全选禁用)的文章就介绍到这了,更多相关element-ui table复选框全禁用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• vue+element UI实现树形表格带复选框的示例代码
• vuejs+element UI table表格中实现禁用部分复选框的方法

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！