在使用 Element UI 的 el-table 组件时，若你想要在使用 v-model 双向绑定数据的同时记录修改前的数据，一下提供2种方式

  1. 初始化时备份数据: 在数据加载或组件初始化时，为你的表格数据创建一个深拷贝的备份。这样，在数据发生变化时，你可以对比原始备份数据来获取修改前的状态。
  2. 监听数据变化: 你可以使用 Vue 的监听器 (watch) 来监听 v-model 绑定的数据对象或数组的变化，当数据变化时手动记录或比较差异。
<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @edit="onEdit"
  >
    <!-- 表格列定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      // 原始数据
      originalTableData: [],
      // 当前显示的数据，与 el-table 的 v-model 绑定
      tableData: [
        // 初始化数据...
      ],
    };
  },
  created() {
    // 初始化时备份数据
    this.originalTableData = JSON.parse(JSON.stringify(this.tableData));
  },
  watch: {
    // 监听 tableData 的变化
    tableData: {
      handler(newData) {
        // 这里可以添加逻辑来处理数据变更，比如比较新旧数据等
        this.originalTableData = JSON.parse(JSON.stringify(newData));
        console.log('数据已变更，原始数据:', this.originalTableData);
      },
      deep: true, // 深度监听，用于监听对象或数组内部的变化
    },
  },
  methods: {
    onEdit(row, column, event) {
      // 编辑行的处理逻辑，这里可以根据需要使用 this.originalTableData 获取修改前的数据
      console.log('正在编辑:', row, '列:', column, '事件:', event);
    },
  },
};
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.