VUE中，使用iview table组件，用代码设置某一行数据选中

原创于 2020-01-10 09:55:43 发布 · 3.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

Vue

6 篇文章

订阅专栏

本文介绍在使用iview的table组件时，如何解决更新行数据后复选框状态不同步的问题。通过为更新后的行数据添加_Checked属性，并在数据更新时设置其值为true，实现复选框状态的正确显示。

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

在项目开发中，需要操作表格，使用的是iview的table组件，操作需求如下：
1、表格需要显示复选框，可以进行单选和全选
2、选择某一行数据，复选框选中，取得当前行数据进行操作
3、更新当前选中行的数据

遇到的问题:
当前选择行数据更新后，当前行的复选框不能显示选中~~

解决办法：

1、修改表格某行数据的时候，添加属性 _checked = true 表示选中改行，_disabled = true,表示禁用该行，代码如下

   // 取得更新后的行数据
   var updatedRowData = getUpdatedRowDate();
   // 取得更新行在表格数据中的索引
   var index = getUpdatedRowIndex();
   // 重点：为更新行添加属性_checked = true
   updatedRowData._checked = true;
  //更新表格数据
  this.$set(this.tableDatas,index,updatedRowData)