VXE 树形表格：多条数据编辑后统一保存示例 - 完整代码 - 常规

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>VXE 树形表格示例 - 多条数据编辑后统一保存</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/xe-utils@v3"></script>
  <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
</head>
<body>
  <div id="app">
    <vxe-table
      ref="xTable"
      :data="tableData"
      :tree-config="{ children: 'children', expandAll: true }"
      :edit-config="{ trigger: 'cell', mode: 'row' }"
      @edit-closed="handleEditClosed"
    >
      <vxe-table-column type="index" title="#" />
      <vxe-table-column prop="name" title="名称" width="150" />
      <vxe-table-column prop="value" title="值" width="150" :edit-render="{ name: 'input' }" />
      <vxe-table-column prop="description" title="描述" width="150" :edit-render="{ name: 'input' }" />
      <vxe-table-column title="操作" width="120">
        <template #cell="{ row }">
          <button @click="editRow(row)">编辑</button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <button @click="saveData">保存</button>
  </div>
  <script>
    Vue.use(VXETable)

    new Vue({
      el: '#app',
      data() {
        return {
          tableData: [
            {
              name: '项1',
              value: '值1',
              description: '描述1',
              children: [
                {
                  name: '子项1',
                  value: '值1',
                  description: '描述1'
                },
                {
                  name: '子项2',
                  value: '值2',
                  description: '描述2'
                }
              ]
            },
            {
              name: '项2',
              value: '值2',
              description: '描述2',
              children: [
                {
                  name: '子项3',
                  value: '值3',
                  description: '描述3'
                },
                {
                  name: '子项4',
                  value: '值4',
                  description: '描述4'
                }
              ]
            }
          ]
        }
      },
      methods: {
        editRow(row) {
          this.$refs.xTable.editRow(row)
        },
        handleEditClosed(row) {
          console.log('保存：', row)
        },
        saveData() {
          const modifiedData = this.$refs.xTable.getModifiedData()
          console.log('保存所有修改的数据：', modifiedData)
        }
      }
    })
  </script>
</body>
</html>