vxe-table 多条数据编辑后统一保存 - Vue.js 代码示例

<template> <div> <vxe-table ref="table" :columns="columns" :data="tableData" :edit-config="{ trigger: 'manual' }" @edit="handleEdit" ></vxe-table> <button @click="saveChanges">保存</button> </div> </template>

<script> export default { data() { return { columns: [ // 列配置 // ... ], tableData: [ // 表格数据 // ... ], editedData: [] // 保存编辑后的数据 }; }, methods: { handleEdit(params) { const { row } = params; // 将编辑后的数据保存到editedData中 if (!this.editedData.find(item => item.id === row.id)) { this.editedData.push(row); } }, saveChanges() { // 保存所有编辑后的数据 // 调用后端接口保存数据 // ...

  // 清空editedData
  this.editedData = [];
}

} }; </script>

在上面的代码中，我们首先定义了一个editedData数组用于保存编辑后的数据，然后在handleEdit方法中，每当有数据被编辑时，将编辑后的数据保存到editedData中。

最后，在saveChanges方法中，我们可以调用后端接口将editedData中的数据保存到数据库中，并在保存完成后清空editedData数组。

这样，当用户编辑完多条数据后，点击保存按钮时，所有编辑后的数据都会被保存到数据库中。