vxe-grid 树形表格 多条数据编辑后统一保存 - 代码示例

<template>
  <div>
    <vxe-toolbar>
      <vxe-button type="text" icon="save" @click="saveData">保存</vxe-button>
    </vxe-toolbar>
    <vxe-grid ref="grid" :data="data" :tree-config="{ children: 'children' }">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="名称" width="150"></vxe-column>
      <vxe-column field="value" title="值" width="150">
        <template #cell="{ row }">
          <input v-model="row.value" type="text" class="vxe-input" style="width: 100%;" />
        </template>
      </vxe-column>
    </vxe-grid>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: 'A', value: '1', children: [
          { id: 2, name: 'A-1', value: '2' },
          { id: 3, name: 'A-2', value: '3' }
        ]},
        { id: 4, name: 'B', value: '4', children: [
          { id: 5, name: 'B-1', value: '5' },
          { id: 6, name: 'B-2', value: '6' }
        ]}
      ],
      originalData: [] // 保存原始数据
    };
  },
  mounted() {
    this.originalData = JSON.parse(JSON.stringify(this.data)); // 保存原始数据的副本
  },
  methods: {
    saveData() {
      // 编辑后的数据
      const editedData = JSON.parse(JSON.stringify(this.data));

      // 对比原始数据和编辑后的数据，找出有变化的数据
      const changedData = this.getChangedData(this.originalData, editedData);

      // 发送请求保存变化的数据
      this.saveChangedData(changedData);
    },
    getChangedData(originalData, editedData) {
      const changedData = [];
      this.compareData(originalData, editedData, changedData);
      return changedData;
    },
    compareData(originalData, editedData, changedData) {
      originalData.forEach((originalItem, index) => {
        const editedItem = editedData[index];
        if (originalItem.value !== editedItem.value) {
          changedData.push(editedItem);
        }
        if (originalItem.children && originalItem.children.length > 0) {
          this.compareData(originalItem.children, editedItem.children, changedData);
        }
      });
    },
    saveChangedData(changedData) {
      // 在这里发送请求保存变化的数据
      console.log(changedData);
      // ...
    }
  }
};
</script>