Vue设置selection选择框条件不可选
记录一下应用场景:当添加的内容属于暂存数据时,再次选择时需要把已添加的数据设置为不可选,避免上传时数据重复文章目录HTML方法区效果图HTML在selection组件中添加:selectable属性<el-table-column :selectable="checkSelectMember"type="selection" width="55" align="center"/>方法区
·
记录一下应用场景:当添加的内容属于暂存数据时,再次选择时需要把已添加的数据设置为不可选,避免上传时数据重复
HTML
在selection组件中添加:selectable属性
<el-table-column :selectable="checkSelectMember"
type="selection" width="55" align="center"/>
方法区
在方法中做数据对比,若外部数据与本行数据相同时,设置isChecked = false不可选,否则就返回true可选
这里的memberList指外部暂存数据集合,row指每一行可添加数据
/**
* 设置多选框已有人员不可选
* row:当前行数据
* index:当前第几位
*/
checkSelectMember(row, index) {
let isChecked = true
this.memberList.forEach(member => {
if (member.employeeName === row.nickName) {
isChecked = false
}
})
return isChecked
},
效果图
第一次添加完数据:
再次点添加时已有数据不可选:
记录就到这里,有不清楚的欢迎到评论区留言~
更多推荐
已为社区贡献6条内容
所有评论(0)