VXE树形表格多条数据编辑后统一保存 - 代码示例与教程 - 常规

<!DOCTYPE html>
<html>
<head>
  <title>VXE树形表格编辑示例 - 完整代码</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/xe-utils@v4"></script>
  <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
</head>
<body>
  <div id="app">
    <vxe-table :data="treeData" :tree-config="{children: 'children', expandAll: true}" @edit-save="saveData">
      <vxe-table-column type="index" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="名称" width="200" edit-render="{type: 'input'}"></vxe-table-column>
      <vxe-table-column field="value" title="数值" width="200" edit-render="{type: 'input'}"></vxe-table-column>
    </vxe-table>
    <button @click="saveAll">保存</button>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          treeData: [
            { name: '节点1', value: '数值1', children: [
              { name: '子节点1', value: '数值2', children: [] },
              { name: '子节点2', value: '数值3', children: [] },
            ] },
            { name: '节点2', value: '数值4', children: [
              { name: '子节点3', value: '数值5', children: [] },
              { name: '子节点4', value: '数值6', children: [] },
            ] },
          ]
        }
      },
      methods: {
        saveData({ row }) {
          console.log('保存数据', row);
          // 这里可以将数据保存到后端
        },
        saveAll() {
          this.$refs.table.saveAll()
            .then(() => {
              console.log('保存全部数据');
              // 这里可以将所有数据保存到后端
            })
            .catch(() => {
              console.error('保存失败');
            });
        }
      }
    })
  </script>
</body>
</html>