问题点:当条件数据全被禁用时,全选按钮不是禁用的状态。
复选框全被禁用时,全选按钮将被隐藏
问题总结: 当条件数据全被禁用时,全选按钮也变成禁用的状态,而不是隐藏。有会做的小伙伴希望跟帖。谢谢!
问题总结: 当条件数据全被禁用时,全选按钮也变成禁用的状态,而不是隐藏。有会做的小伙伴希望跟帖。谢谢!
复选框框架:通过调用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>
#### 最后
-------------------------------------------------------------
大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。
![](https://img-blog.csdnimg.cn/img_convert/718310d106ab948d6f467d78e08b1aed.png)