elementUI表格编辑状态下，如何获取修改过的行

最新推荐文章于 2024-01-05 16:05:05 发布

原创最新推荐文章于 2024-01-05 16:05:05 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

vue+element项目专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何利用 Vue 的 row-click 事件和动态 $watch 监听，捕捉表格在编辑状态下被修改的行数据，并提供筛选编辑过行数据的方法。通过实例展示了获取修改行ID和详细数据的过程，适用于数据管理与实时监控场景。

表格再编辑状态，需要获取到哪一行数据被修改了，面对这样一个场景，我们可以结合element的row-click事件以及动态的监听$watch来实现。
tableList，代表表格的数据， rowIds代表需要记录的id数组的集合， isUpdateTableList为true代表表格进入编辑状态了
import { cloneDeep } from ‘lodash-es’; //cloneDeep是进行深拷贝的插件

 /** 编辑状态下，监听行数据是否变化 */
    rowClick(row, column, event) {
      // 编辑状态下对修改过得行数据的id进行保存
      if (this.isUpdateTableList) {
        const rowPre = cloneDeep(row);
        this.$watch(
          () => {
            return row;
          },
          {
            handler(newVal, oldVal) {
              let that = this;
              // console.log(newVal, oldVal, cloneDeep(newVal) == cloneDeep(oldVal))
              if (newVal !== rowPre) { // 如果行数据发生变化，则记录其id
                that.rowIds.push(row.id);
                that.rowIds = [...new Set(that.rowIds)];
                console.log(that.rowIds);
              }
            },
            deep: true,
          },
        );
      }
    },

上面的方法只是获取到了具体修改过行的id，如果需要得到修改过的行的具体数据，可以过滤

 /** 筛选编辑过的行数据公共方法 */
    filterUpdateRow() {
      return this.tableList.filter((item, index) => {
        //函数本身返回布尔值，只有当返回值为true时，当前项存入新数组。
        return  this.rowIds.indexOf(item.id)>-1
      })
    },