在使用 Element UI 的 el-table 组件时，若你想要在使用 v-model 双向绑定数据的同时记录修改前的数据，一下提供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>
