el-table 使用了 修改行使用了v-model双向绑定 如何记录修改前的数据

简介: el-table 使用了 修改行使用了v-model双向绑定 如何记录修改前的数据

在使用 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>
目录
相关文章
|
JavaScript
VUE element-ui之table表格横向展示(表尾汇总)
VUE element-ui之table表格横向展示(表尾汇总)
2016 0
VUE element-ui之table表格横向展示(表尾汇总)
element中el-cascader级联 下拉选择-可单独多选(整理)
element中el-cascader级联 下拉选择-可单独多选(整理)
详解Vue3——#default=“scope”
详解Vue3——#default=“scope”
1168 0
|
Web App开发 域名解析 缓存
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
本文我们主要为大家介绍在 Ubuntu 20.04 上安装 Node.js 和 npm 的三种不同的方式。
162430 7
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9161 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
9347 120
|
Kubernetes 应用服务中间件 nginx
史上最全干货!Kubernetes 原理+实战总结(全文6万字,90张图,100个知识点)(上)
史上最全干货!Kubernetes 原理+实战总结(全文6万字,90张图,100个知识点)
51529 30
|
12月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
1364 0
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
本文介绍了Spring Boot中静态资源的访问位置、如何进行静态资源访问测试、自定义静态资源路径和静态资源请求映射,以及如何处理自定义静态资源映射对index页面访问的影响。提供了两种解决方案:取消自定义静态资源映射或编写Controller来截获index.html的请求并重定向。
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
|
JavaScript C++
使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件
本文详细介绍了如何使用Vite创建Vue3+TypeScript项目,并整合ElementPlus、Axios、Pinia、Less、Vue-router等组件或插件的步骤和配置方法。
4056 2