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 @   土小狗  阅读(718)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
点击右上角即可分享
微信分享提示