toggleRowSelection取消选中无效

新手上路,请多包涵
//有一个选中的列表
//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)
    })
    ...
}

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

阅读 11.6k
4 个回答
✓ 已被采纳新手上路,请多包涵

已解决。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)
              }
            })
          }

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

以上问题还是有BUG的(场景:分页是取消选中问题)
解决思路:定义一个数组存放分页选中代码,同时监听表格数据变化
image.png
image.png
image.png

上面的方法还是有问题,每次选中都会触发选中,近期改进方案如下
1.单独定义单选和多选
image.png
image.png
image.png
image.png
以上大概是主要代码,参考哈

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题