目录

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

复选框框架：通过调用selectable方法

 


 


 


 


 


 


 

，进行禁用复选框














。

1.指定行禁用：

2.条件禁用：

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

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

问题总结： 当条件数据全被禁用时
 

 

 

 

 

 

 
，全选按钮也变成禁用的状态
 

 

 

 

 

 

 

 ，而不是隐藏 
  
  
  
  
  
  
  。有会做的小伙伴希望跟帖


 


 


 


 


 


 


 

。谢谢！

问题总结： 当条件数据全被禁用时              ，全选按钮也变成禁用的状态 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，而不是隐藏 
 
 
 
 
 
 
。有会做的小伙伴希望跟帖  
   
   
   
   
   
   
   。谢谢！

复选框框架：通过调用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; //禁用 } },

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

问题总结： 当条件数据全被禁用时
 

 

 

 

 

 

 
，全选按钮也变成禁用的状态
 

 

 

 

 

 

 

 ，而不是隐藏                      。有会做的小伙伴希望跟帖
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 。谢谢！