iview 动态控制 table中某一行select勾选框能否选中，以及某一行select勾选框能否显示(隐藏禁用的勾选框)。

aigoV

于 2020-06-12 11:36:08 发布

阅读量4k

点赞数 3

分类专栏： Vue.js 文章标签： vue css _disabled display

本文链接：https://blog.youkuaiyun.com/aigov/article/details/106710829

版权

本文介绍了如何在Vue项目中，通过iview实现动态控制表格（table）中某一行的选择框（select）选中状态及显示隐藏。具体方法包括：根据处理状态值设置数据项的禁选状态，以及利用CSS隐藏禁用的勾选框，确保不能被选中的勾选框既不可选也看不见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如上图，这是一个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 属性
       }
   }

}

效果：