【element-ui】 多个table分别对应的多选框选中后部分禁用/selectable的用法
2020-06-30 20:01
1236 查看
HTML:
<span @click="addPersonFunc('2')"> <i class="el-icon-circle-plus">添加人员</i> </span> <el-dialog title="添加人员" :visible.sync="dialogTableVisible"> <el-table :data="personList"> //selectable的用法 <el-table-column type="selection" width="55" :selectable="checkboxT" disabled="true"></el-table-column> <el-table-column type="index" label="序号"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="departName" label="部门"></el-table-column> </el-table> <el-pagination> //。。。。。分页省略 </el-pagination> <div class="winBox"> <el-button type="success" @click="okFunc">确定</el-button> <el-button type="primary" @click="cancelFunc">取消</el-button> </div> </el-dialog>
method:
addPersonFunc(val) { this.dialogTableVisible = true; //temple是一个我自定义的临时参数,用来存放val (此处的val为数值) this.temple = val; }, checkboxT(row, index) { if ( // this["arr" + this.temple]相当于this.arrtemple //例子:如果this.temple=1,那么this["arr" + this.temple]相当于:this.arr1 this["arr" + this.temple].some(item => { //some()方法请看文章后面的文字 return item.personCode === row.username; }) ) { return false; } else { return true; } },
关于some()
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
关于selectable的说明:
相关文章推荐
- vuejs+element UI table表格中实现禁用部分复选框的方法
- vue+element ui 使用$refs获取el-dialog 下的 el-table 组件 ,以及使用table多选,默认选中
- 使用element中的table组件,单击某一行数据时选中对应的复选框
- 关于Element-ui的多选框,单选框无法选中的问题
- 使用element中的table组件,如何单击某一行数据时选中对应的复选框
- elementui checkbox-group多选框怎么选中id值
- element-ui表格使用前台排序,当table部分数据为空null时,解决排序不起作用、排序错乱和排序不整齐的问题
- elementUI table选中后改变背景色
- 用vue+Element-ui写一个后台管理界面,点击头部导航对应显示下方左侧导航菜单,点击左侧菜单对应显示右边内容,点击右边内容的按钮出现一个新页面依旧能够选中左侧相应菜单,求解决???!!!!
- element-ui表格table某一列表头加红色*
- vue+elementui 之 table+pagination
- 在table中选中某条数据,让其显示对应详细信息
- 自定义element-ui的table字体颜色,及背景色
- Vue + Element table中selection复选框禁用某一行
- element-ui添加复选框并把选中的列表中的数据传入后台
- Element-ui(el-table、el-pagination)实现表格分页
- vue+elementui怎样点击table中的单元格触发事件--弹框
- 禁用elementui calendar的点击事件
- vue+element + table将选中的数据导出为excel(导出的是当前页选中的数据)
- vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)