element-ui table使用type=‘selection‘复选框全禁用-全选禁用

element-ui table使用type=‘selection‘复选框全禁用-全选禁用

目录

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

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

推荐整理分享element-ui table使用type=‘selection‘复选框全禁用-全选禁用，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

效果：

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

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

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