您的位置:首页 > 产品设计 > UI/UE

【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的说明:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐