iView 动态控制 TABLE中某一行SELECT勾选框能否选中
如上图,这是一个vue页面中的table,在其columns中加了一个selection后,实现了多选/全选table行的功能:
{
type: 'selection',
width: 60,
align: 'center'
},
现需要对这个table中select勾选框的勾选和显示进行diy:
1、根据table行中的处理状态值来动态控制该行勾选框能否被勾选中:处理状态值==1,不能勾选,其他值能勾选。
2、隐藏掉table行中的不能勾选的勾选框。
解决:
1、.js文件中 给 data 项设置特殊 key _disabled: true
禁止选择当前项。
if(this.data.length>0){ //data是请求后台返回的数据集
for (let i = 0; i < this.data.length; i++) {
if (this.data[i].clzt ==1 ) {//处理状态 1已处理 则勾选框禁止被勾选(置灰)
this.data[i]._disabled = true; //给满足条件的行设置 _disabled 属性
}
}
}
效果: