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 属性
       }
   }
 
}

效果:

posted @ 2022-06-12 14:12  土小狗  阅读(583)  评论(0编辑  收藏  举报