问题总结：
&nbs p; 当条件数据全被禁用时，全选按钮也变成禁用的状态，而不是隐藏。有会做的小伙伴希望跟帖。谢谢！
复选框框架：
通过调用selectable方法，进行禁用复选框。
<!-- 复选框禁用 -->
<el -t able
v-loading="loading"
:data="studentList"
@selection-change="handleSelectionChange"
>
<el-table-column
ty PE ="selection"
width="55"
align=" center "
:selectable="selectable"
/>
<el-table-column label="编号" align="center" PR op="studentId" />
1.指定行禁用：
//复选框禁用
selectable(row,rowIndex) {
//索引是从0 开始 ，条件1是指只有第2行数据不被禁用
if(rowIndex == 1){
return true; //不禁用
}else {
return false; //禁用
}
}
效果：
2.条件禁用：
//复选框禁用
selectable(row,rowIndex) {
//只有姓名【zhang】不被禁用
if (row.studentN am e == "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{
dis play : none;
pos IT ion: 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=& # 39;selection'复选框全禁用(全选禁用)的 文章 就介绍到这了,更多相关element-ui table复选框全禁用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
您可能感兴趣的文章: vue+element UI实现树形表格带复选框的示例代码 vuejs+element UI table表格中实现禁用部分复选框的方法
总结
以上是 为你收集整理的 element-ui table使用type='selection'复选框全禁用(全选禁用)详解 全部内容，希望文章能够帮你解决 element-ui table使用type='selection'复选框全禁用(全选禁用)详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于element-ui table使用type='selection'复选框全禁用的详细内容...