iview表格中checkbox状态被重置问题

1,002 阅读1分钟

问题背景:

  1. 在使用iview的Table组件的默认多选功能时
  2. 对表格中某些数据进行了勾选,即已有部分数据被选中

问题过程:

此时你对表格的data数据进行手动更改的时,表格之前被选中的数据会被重置选中状态
过程如下图所示: 在iview文档中并没有找到相关处理方法,目前采用办法如下,在浏览过 iview 源码后,获知table组件有一个toggleSelect(_index,rowKey)方法,所以可以采用在选中状态被自动重置后,再调用this.$refs.table.toggleSelect(_index)方法,再手动重置

tips:

在同一方法下对数据更改后,需要在dom更新回调中再手动更新,即调用toggleSelect()

// sample
changeData() {
    this.data[2].age = 33333;
    this.$nextTick(()=>{
        this.$refs.selection.toggleSelect(0);
        this.$refs.selection.toggleSelect(1);
        this.$refs.selection.toggleSelect(3);
    });
}

再次感想:

看源码的重要性