vxe-table可编辑行点击编辑修改后再点击其他编辑，不保存初始编辑的数据

---

一、问题描述

vxe-table 可编辑页官网地址

1.如图

点击第一个编辑并修改第一行的数据后，直接点击第二行的编辑，第一行的编辑会自动保存

官网demo：手动编辑

2. 修改思路

（1）问题由来

其实vxe-table中有可以配合 revertData 函数实现取消就还原数据，但是这个是【取消】方法中的，而可编辑行实际上是修改行，并且只存储一行的数据，所以你改了之后点击别的，会帮你自动保存。其实也没啥问题，但是在实际使用的时候，需要调用接口，改变源数据，看过去就像是个bug。
（2）解决思路
如下图，ant design vue 中的可编辑行，使用上面的同样流程，你会发现，之前的编辑状态依旧没变，得到了一个关键点ant design vue中的可编辑行，缓存的当前可编辑的所有数据，也就是一个对象，根据数据里面的key（也可以是id，只要是唯一值）做为key，行的所有数据作为value，缓存所有数据

二、解决问题

1. 定义一个对象变量，存储所有的可编辑行数据editableData

const editableData = ref<Record<number, any>>({}); // 初始化为一个空对象

2.编辑方法

如果编辑editableData长度大于1，就将原本行数据还原
否则就将这行的数据存储到可编辑行数据editableData中

const editRowEvent = (row: any) => {
  const $table = vxeTableRef.value
  if ($table) {
    const list = Object.keys(editableData.value)
    if (list.length) {
      $table.clearEdit().then(() => {
        for (const key in editableData.value) {
          editableData.value[key]
          $table.revertData( editableData.value[key]) // 还原行数据
        }
      })
    }
    $table.setEditRow(row)
    editableData.value[row.id] = row
  }
}

3.保存

注意点（1）删除row._X_ROW_KEY： row._X_ROW_KEY; // vxe-table 行数据的一个标识，不去掉编辑前后数据就会一直不一样
（2）判断如果编辑前和编辑后的数据一样，就不请求
（3）如果编辑成功，把这一行的数据在editableData中删除

import { isEqual } from 'lodash-es'; // isEqual 对比两个对象是否一样的方法
const saveRowEvent = (row: any, rowIndex: number) => {
  const $table = vxeTableRef.value
  if ($table) {
    $table.clearEdit().then(async () => {
      tableConfig.loading = true
      delete row._X_ROW_KEY; // vxe-table 行数据的一个标识，不去掉编辑前后数据就会一直不一样
      // 如果编辑前和编辑后的数据一样，就不请求
      if (!isEqual(row, tableConfig.sourceList[rowIndex])) {
        await 接口请求
        });
      }
      message.success(`保存成功！`)
      delete editableData.value[row.id]
      await 初始化接口
    }).finally(() => {
      tableConfig.loading = false
    })
  }
}

总结

换个思路就好