toggleRowSelection取消选中无效

Question

//有一个选中的列表
//dialogCheckedData是表格选中的行数据
//表格table的ref="dialogTable"
<ul>
    <li class="model-item" v-for="item in dialogCheckedData" :key="item.id">
        <span>{{ item.name }}</span>
        <div  @click="cancelSelection(item)">X</div>
    </li>
</ul>
//method:
cancelSelection(item) {
    this.$nextTick(() => {
       this.$refs.dialogTable.toggleRowSelection(item, false)
    })
    ...
}

大概的代码结构如下结果取消不了选中

Answer 1

已解决。toggleRowSelection(item, false)中的item一定得是表格的行数据，值相等也不行。

    cancelSelection(obj) {
            // 删除数据
            this.dialogCheckedData= this.dialogCheckedData.filter(item => {
              return item.id !== obj.id
            })
            // 取消表格的勾选
            this.tableData.map(item => {
              if (item.id === obj.id) {
                this.$refs.dialogTable.toggleRowSelection(item, false)
              }
            })
          }

Answer 2

检查能否拿到 this.$refs.dialogTable

Answer 3

以上问题还是有BUG的（场景：分页是取消选中问题）
解决思路：定义一个数组存放分页选中代码，同时监听表格数据变化

上面的方法还是有问题，每次选中都会触发选中，近期改进方案如下
1.单独定义单选和多选




以上大概是主要代码，参考哈

Answer 4

感谢解决了我的问题，我困惑了快一天