element-ui 弹框表格多选--选中的列表数据改变，更改表格选中状态

猿生前端

于 2019-05-23 16:25:56 发布

阅读量9.7k

点赞数 1

分类专栏： element-ui框架

本文链接：https://blog.youkuaiyun.com/qq_37639389/article/details/90482917

版权

element-ui框架专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在使用Element UI时，处理弹框表格多选情况，特别是当表格数据变化时如何更新选中状态。通过toggleRowSelection方法，实现在弹框关闭再打开时，根据后台数据动态调整已选中的表格行。

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

背景：后台管理系统，经常需要在一个页面A点击一个按钮，弹出一个弹框，在弹框里面可以勾选想要添加的数据到页面A里展示，如
点击添加按钮，弹框，全选，确定：
在这里插入图片描述
把数据添加到A页面，如下：

当我们点击删除时，可以把数据删掉一条或多条。我们需要实现的是：再次打开弹框时，弹框里把对应的已删数据，不勾选，实时对应：

在elementui官网里找了好久才找到方法： toggleRowSelection，因为之前没用过这个方法
在这里插入图片描述
解决方法：
在弹框打开的时候进行改方法操作：
循环列表数据，把每一行设置对应选中与否即可。

dialogOpen() {
      this.$nextTick(() => {
        this.list.forEach((item, index) => {  //list是弹框所有的列表数据
          this.$refs.myTable.toggleRowSelection(  //myTable是 el-dialog的ref
            this.list[index],
            this.selectedId.includes(item.id)  //selectedId是选中的所有id 数组。includes es6语法，如果包含当前行就返回true，否则false。
          );
        });
      });
    }