vxe-table 多条数据编辑后统一保存完整代码

以下是使用vxe-table进行多条数据编辑后统一保存的完整代码示例：

<template>
  <div>
    <vxe-table
      ref="table"
      :data="data"
      :edit-config="{ trigger: 'manual' }"
      :row-class-name="rowClassName"
      @cell-click="handleCellClick"
    >
      <vxe-table-column type="index" width="60" align="center"></vxe-table-column>
      <vxe-table-column field="name" title="Name"></vxe-table-column>
      <vxe-table-column field="age" title="Age"></vxe-table-column>
      <vxe-table-column field="address" title="Address"></vxe-table-column>
      <vxe-table-column title="Operation" align="center">
        <template #cell="{ row }">
          <button @click="handleSave(row)">Save</button>
          <button @click="handleCancel(row)">Cancel</button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <button @click="handleSaveAll">Save All</button>
  </div>
</template>

<script>
import { VXETable } from 'vxe-table'
import 'vxe-table/lib/style.css'

export default {
  data() {
    return {
      data: [
        { name: 'John', age: 28, address: 'New York' },
        { name: 'Mike', age: 32, address: 'London' },
        { name: 'Amy', age: 25, address: 'Paris' }
      ],
      editingRows: []
    }
  },
  methods: {
    rowClassName({ row }) {
      return this.editingRows.includes(row) ? 'row-editing' : ''
    },
    handleCellClick({ row }) {
      if (!this.editingRows.includes(row)) {
        this.editingRows.push(row)
      }
      this.$refs.table.setActiveRow(row)
      this.$refs.table.setActiveColumn('name')
      this.$refs.table.editCell(row, 'name')
    },
    handleSave(row) {
      this.editingRows = this.editingRows.filter(item => item !== row)
      this.$refs.table.updateData(row)
      // 保存数据到服务器
      // 示例代码：axios.post('/api/save', row)
    },
    handleCancel(row) {
      this.editingRows = this.editingRows.filter(item => item !== row)
      // 取消编辑，还原数据
      this.$refs.table.revertData(row)
    },
    handleSaveAll() {
      const promises = this.editingRows.map(row => {
        return new Promise((resolve, reject) => {
          this.$refs.table.validateRow(row, valid => {
            if (valid) {
              this.handleSave(row)
              resolve()
            } else {
              reject(new Error('Validation failed'))
            }
          })
        })
      })
      Promise.all(promises)
        .then(() => {
          this.editingRows = []
          // 全部保存成功
        })
        .catch(error => {
          console.error(error)
          // 保存失败，处理错误
        })
    }
  },
  mounted() {
    VXETable.use(VXETable.Edit)
    VXETable.use(VXETable.Validate)
  }
}
</script>

<style>
.row-editing {
  background-color: #f1f1f1;
}
</style>

在上述代码中，我们使用了editingRows数组来跟踪正在编辑的行。当用户点击单元格时，我们将该行添加到editingRows数组中，并使用$refs.table.editCell方法启动单元格编辑模式。当用户点击"Save"按钮时，我们将行从editingRows数组中移除，并使用$refs.table.updateData方法更新表格数据，并可以将数据保存到服务器。当用户点击"Cancel"按钮时，我们将行从editingRows数组中移除，并使用$refs.table.revertData方法还原数据。

当用户点击"Save All"按钮时，我们遍历editingRows数组，并使用$refs.table.validateRow方法验证行数据。如果验证通过，则调用handleSave方法保存数据，并使用Promise.all等待所有保存操作完成。如果验证失败，则会显示验证错误信息。

以上是一个使用vxe-table进行多条数据编辑后统一保存的完整代码示例。您可以根据自己的需求进行修改和扩展