在使用 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>