vue-element-table编辑弹框数据不同步显示的问题

页面中点击修改弹出修改弹框，弹框内有可选列表，选择指定列表显示另一个弹框b,b需要回显所需数据。

容易遇到的问题是，b弹框内的回显数据不对等，是上一个a弹框内表格选择的那一列数据。

原因是vue内修改数组和数据不同步更新。

解决方案：

更改赋值方式：$set，如果是对象的话用copy = Object.assign({}, yourObjdata)

代码参考：

  //修改选择
    handleSelectionChangeUpdate(val) {
      // this.multipleSelectionUpdate = val;
      if (val.length > 1) {
        this.$refs.updateTable.clearSelection();
        this.$refs.updateTable.toggleRowSelection(val.pop());
      } else {
        this.multipleSelectionUpdate = val;
      }
      // this.multipleSelectionUpdate = val[0];//这种赋值同样不回实时更新
      this.$set(this.multipleSelectionUpdate, val[0]);
      console.log(this.multipleSelectionUpdate);
    },
    //修改按钮
    xiugaiFormInfo() {
      this.updateDialogVisible = true;
    },
//修改确认框
    confirmUpdate() {
      this.updateDialogVisible = false;
      //找出修改项
      console.log(this.multipleSelectionUpdate);
      //弹出修改
      this.xiugaiDialogVisible = true;
      //回显 -- 原始数据替换了简易数据 所以都会包含id
      this.addForm = {};
      let copy = Object.assign({}, this.multipleSelectionUpdate[0]); //防止不实时更新
      this.addForm = copy;
    },

重点代码：

handleSelectionChangeUpdate(val) {
...
 // this.multipleSelectionUpdate = val[0];//这种赋值同样不回实时更新
      this.$set(this.multipleSelectionUpdate, val[0]);}
 //修改确认框
    confirmUpdate() {
...
 //回显 -- 原始数据替换了简易数据 所以都会包含id
      this.addForm = {};
      let copy = Object.assign({}, this.multipleSelectionUpdate[0]); //防止不实时更新
      this.addForm = copy;
}

示例图：

 扩展：ele-table 默认的可多选，如果只需要修改指定一条数据，多选变单选：可以通过判断改成单选

    //修改选择
    handleSelectionChangeUpdate(val) {
      if (val.length > 1) {
        this.$refs.updateTable.clearSelection();
        this.$refs.updateTable.toggleRowSelection(val.pop());
      } else {
        this.multipleSelectionUpdate = val;
      }
      // this.multipleSelectionUpdate = val[0];//这种赋值同样不回实时更新
      this.$set(this.multipleSelectionUpdate, val[0]);
      console.log(this.multipleSelectionUpdate);
    },