您现在的位置是:首页 > Javascript
当前栏目
element-ui table使用type=‘selection‘复选框全禁用-全选禁用
2023-03-31 10:41:46 时间
目录
问题总结: 当条件数据全被禁用时,全选按钮也变成禁用的状态,而不是隐藏。有会做的小伙伴希望跟帖。谢谢!
问题总结: 当条件数据全被禁用时,全选按钮也变成禁用的状态,而不是隐藏。有会做的小伙伴希望跟帖。谢谢!
复选框框架:通过调用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; //禁用
}
},
当存在可选时,全选按钮被表示出来
问题总结: 当条件数据全被禁用时,全选按钮也变成禁用的状态,而不是隐藏。有会做的小伙伴希望跟帖。谢谢!
相关文章
- 如何使用Fetch在JavaScript中进行AJAX调用
- 为什么美国程序员不用加班,而中国程序员就只能996?
- 特朗普对H1-B开刀为何彻底激怒硅谷?这是科技人才基石
- 再来一打Web安全面试题
- 问题来了!5个JavaScript问答测试你的技能熟练程度
- 前端开发不可不知的10个Sublime Text应用技巧
- 有哪些被低估未被广泛使用的有用的 HTML标签?
- 12 个实用的前端开发技巧总结
- 2020技术人才薪酬报告:四成人担心半年内遭遇失业危机
- 天下武功唯快不破:6种快速编写代码的方式
- 4个隐藏的有用的JavaScript技巧
- 7个让你微笑的终端命令
- 专访28岁退休程序员郭宇:1600人加好友,问我“挣了多少钱”
- Spring MVC 异常解析器,原理就是这么简单
- 自认为精通React,这些JavaScript概念你掌握了没?
- 发现了 10 个好用JavaScript图像处理库
- 写给开发人员的Web无障碍标准
- 字节跳动禁止中国员工访问海外产品代码库,“内外有别”保平安?
- 5月份Github上热门的JavaScript开源项目排行
- 传奇芯片设计大神Jim Keller又离职了,网友喊话雷军:挖他