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

<template>
  <div>
    <vxe-table
      ref="table"
      :data="tableData"
      :edit-config="{ showUpdateStatus: false }"
      @edit-closed="handleEditClosed"
    >
      <vxe-table-column type="selection" width="60" align="center"></vxe-table-column>
      <vxe-table-column field="name" title="姓名" width="120" align="center" editable></vxe-table-column>
      <vxe-table-column field="age" title="年龄" width="120" align="center" editable></vxe-table-column>
      <vxe-table-column field="address" title="地址" align="center" editable></vxe-table-column>
      <vxe-table-column field="operate" title="操作" width="80" align="center" fixed="right">
        <template #default="{ row }">
          <button @click="handleEdit(row)" class="btn">编辑</button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <div class="btn-group">
      <button @click="handleSave" class="btn">保存</button>
      <button @click="handleCancel" class="btn">取消</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20, address: '北京' },
        { id: 2, name: '李四', age: 25, address: '上海' },
        { id: 3, name: '王五', age: 30, address: '广州' },
      ],
      editData: [],
      isEditing: false,
    };
  },
  methods: {
    handleEdit(row) {
      this.isEditing = true;
      this.editData.push(row);
    },
    handleEditClosed() {
      if (this.isEditing) {
        this.editData = [];
        this.isEditing = false;
      }
    },
    handleSave() {
      if (this.editData.length > 0) {
        this.$refs.table.saveRow(this.editData).then(() => {
          this.editData = [];
          this.isEditing = false;
        });
      }
    },
    handleCancel() {
      if (this.editData.length > 0) {
        this.$refs.table.cancelRow(this.editData).then(() => {
          this.editData = [];
          this.isEditing = false;
        });
      }
    },
  },
};
</script>
<style scoped>
.btn-group {
  margin-top: 20px;
  text-align: center;
}

.btn {
  padding: 6px 12px;
  font-size: 14px;
}
</style>
<p>该示例演示了如何使用 vxe-table 库实现多条数据编辑并统一保存功能。首先，我们创建了一个包含示例数据的表格，并配置了编辑模式，隐藏更新状态提示。然后，添加了一个“操作”列，包含一个“编辑”按钮，点击该按钮会将当前行添加到 editData 数组中。当点击“保存”按钮时，调用 saveRow 方法来保存编辑的数据，并清空 editData 数组和 isEditing 标识。当点击“取消”按钮时，调用 cancelRow 方法来取消编辑的数据，同样清空 editData 数组和 isEditing 标识。最后，我们使用 ref 属性引用 vxe-table 组件的实例，以便在方法中使用 this.$refs.table 调用组件的方法。</p>