elementui table checkBox 多选回显之前选择的内容

山橘满月

于 2021-07-08 17:21:54 发布

阅读量462

点赞数

分类专栏： vue 文章标签： elementui

原文链接：https://blog.youkuaiyun.com/Bing_lemon/article/details/117128606

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细描述了如何在ElementUI的Table组件中实现多选表格数据的编辑功能。通过调用toggleRowSelection方法，实现了从列表进入详情页时保留之前的选择状态。在编辑模式下，左侧表格仍可选择数据，便于增删操作。博主指出在解决过程中遇到的坑，并强调了问题与row-key属性无关。

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

elementui table checkBox 多选表格从列表进详情，看到该条信息之前选择的几项数据

info() {
        //  这个是获取详情数据的接口 
      var a;
      this.get("/business/label/" + this.id).then((res) => {
        console.log(res);
        if (res.code == 200) {
            // 上图右边的数据列表 
          this.SelectedPersonnel = res.data.membersList;
            // 循环  用两边数据都有的key值 取到左边那列 对应的那条数据
            for (let i = 0; i < this.SelectedPersonnel.length; i++) {
              for (let j = 0; j < this.tableData.length; j++) {
                if (
                  this.SelectedPersonnel[i].userId == this.tableData[j].userId
                ) {
                  a = this.tableData[j]; 
                    //  最重要的就是这个，在elementui 官网有这个方法，让这行的状态为true 选中 
                  this.$refs.multipleTable &&
                    this.$refs.multipleTable.toggleRowSelection(a, true);
                }
              }
            }
      
        }
      });
    },
        //  this.tableData 是左边那列可以选择的数据
        //  因为这个是编辑，所以也要有左边可以选择的，方便再增加

弄这个花了挺长时间的，有朋友说是那个table 的row-key属性，事实证明，跟row-key 一点关系也没有。。说实话 elementui 的坑挺深的。。。。