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);
    },