vue 弹框中勾选数据确定后显示，再点开再添加一条信息如何处理

最近遇到一个需求，点击添加出现弹框，其中内容是table表格，勾选确定后将勾选的数据显示在页面上。

由于我直接就用两个数组相等的原因，当我再一次点开弹框点击确定后，原来添加的两条数据瞬间被刷新成我后面新选择的数据了，这很明显是不符合要求的，不能够只是简单的相等。

但是知识浅陋的我只能想到去重操作，希望有大佬有更方便的做法。

//首先表格中加入selection-change属性
@selection-change="handleSelectionChange"

其次在方法中这么写

handleSelectionChange(selection) {
      this.sels = selection;
      this.sels.forEach(e=>{
        this.arrStr.push(e)//这里的arrStr必须是定义过的，不然是会跟着选中的数据一起变化的
      })
      this.arrStr=this.unique(this.arrStr)//调用去重方法
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

去重操作就是比较简单（我这里是根据数据id进行筛选，需要根据实际情况在看）

unique(arr) { // 根据唯一标识id来对数组进行过滤
      const res = new Map();  //定义常量 res,值为一个Map对象实例
      //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
    },

到这一步就是可以自己再加数据了，然后点击确定后再渲染到页面就可以

 submitOperatin() {
      this.tableList = this.arrStr//这一步可以不要，只是为了看懂都是什么数据，这里已经去重了
      this.form.projectList = this.tableList//页面真正显示的东西
      this.open = false
    },

然后我就实现了点开弹框勾选两条信息，页面显示两条，再勾选一条新的时，会自动增加一条，哪怕是选择了一样的数据也不会重复添加了。