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

以下是一个示例代码，展示了如何使用VXE树形表格编辑多条数据后进行统一保存：

<template>
  <div>
    <vxe-button @click='addRow'>添加行</vxe-button>
    <vxe-button @click='saveData'>保存数据</vxe-button>
    <vxe-grid ref='grid' :data='tableData' :tree-config='{ children: 'children' }'>
      <vxe-column type='seq' width='60'></vxe-column>
      <vxe-column field='name' title='名称' width='150'></vxe-column>
      <vxe-column field='age' title='年龄' width='150' edit-render='{ name: 'input' }'></vxe-column>
      <vxe-column field='gender' title='性别' width='150' edit-render='{ name: 'select', options: [ { value: '男', label: '男' }, { value: '女', label: '女' } ] }'></vxe-column>
      <vxe-column field='address' title='地址' width='200' edit-render='{ name: 'textarea' }'></vxe-column>
      <vxe-column field='actions' title='操作' width='120' fixed='right' :show-overflow='false' :render-header='{name: 'btn', slots: { icon: 'refresh' }, events: { click: refreshAllRows }}'></vxe-column>
    </vxe-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          gender: '男',
          address: '北京市海淀区',
          children: [
            {
              name: '李四',
              age: 25,
              gender: '女',
              address: '上海市浦东区',
              children: []
            }
          ]
        }
      ]
    };
  },
  methods: {
    addRow() {
      const grid = this.$refs.grid;
      grid.addRow({ name: '', age: null, gender: '', address: '', children: [] });
    },
    saveData() {
      const grid = this.$refs.grid;
      const data = grid.getTableData();
      // 处理保存逻辑，例如发送请求保存数据到后端
      console.log(data);
    },
    refreshAllRows() {
      const grid = this.$refs.grid;
      grid.refreshData();
    }
  }
};
</script>

在上述代码中，我们首先引入了VXE树形表格的组件，并创建了一个树形表格，数据使用tableData来绑定。我们使用tree-config属性来指定树形表格的配置，其中children属性指定了子节点的字段名。

在表格的列配置中，我们使用了不同的编辑渲染器来处理不同的字段类型。例如，对于年龄字段，我们使用了input编辑渲染器，对于性别字段，我们使用了select编辑渲染器。

在方法中，我们定义了添加行、保存数据和刷新所有行的逻辑。在保存数据方法中，我们通过getTableData方法获取表格中的所有数据，然后可以将其发送到后端进行保存。

你可以根据自己的需求进行修改和扩展。