vue中如何取消对表格多行数据的修改

vue中如何取消对表格多行数据的修改，当点击编辑按钮后，可以对表格进行编辑，修改完多条数据后，点击取消按钮，修改的多条数据恢复原来的数据

  <el-button v-if="showBtn[$index]"
                 type="primary"
                 size="mini"
                 @click.native="handleCancel($index, row)">取消</el-button>

 // 取消编辑
    handleCancel(index, row) {
      row.address = row.originalAddress;
      this.$refs.multipleTable.toggleRowSelection(row);
      this.showEdit[index] = false;
      this.showBtn[index] = false;
      this.$set(this.showEdit, row, false);
      this.$set(this.showBtn, row, false);
    },

[](vue el-table表格数据编辑，取消编辑数据还原，批量提交编辑修改数据_Junmay66的博客-CSDN博客 https://blog.csdn.net/weixin_43965143/article/details/108005737?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167098694416782388046603%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167098694416782388046603&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-2-108005737-null-null.142^v68^wechat,201^v4^add_ask,213^v2^t3_esquery_v2&utm_term=vue%E8%A1%A8%E6%A0%BC%E7%BC%96%E8%BE%91%E5%8F%96%E6%B6%88&spm=1018.2226.3001.4449)%E5%8F%82%E8%80%83%E8%BF%99%E4%B8%AA%EF%BC%8C%E6%9C%9B%E9%87%87%E7%BA%B3

以下是详细回答，望采纳


在 Vue 中，可以使用 $set 命令来重置数据。

• 首先，需要在 data 中声明一个用于保存原始数据的变量，例如：

data: {
  originalData: [],
  editedData: []
}

• 在表格数据被编辑之前，需要将原始数据复制到 originalData 变量中，例如：

this.originalData = JSON.parse(JSON.stringify(this.editedData));

• 然后，在点击取消按钮时，可以使用 $set 命令将 editedData 变量的值重置为 originalData 变量的值，例如：

this.$set(this, 'editedData', this.originalData);