Vxe-table 树形表格 多条数据编辑统一保存代码示例

<template>
  <div>
    <vxe-grid ref="grid" :columns="columns" :data="data" :tree-config="{ children: 'children' }"></vxe-grid>
    <button @click="save">保存</button>
  </div>
</template>
<script>
import { VXETable } from 'vxe-table'
import 'vxe-table/lib/style.css'

export default {
  data() {
    return {
      columns: [
        { field: 'name', title: '名称', width: 200 },
        { field: 'age', title: '年龄', width: 100 },
        { field: 'address', title: '地址', width: 300 }
      ],
      data: [
        { name: 'John Doe', age: 30, address: 'New York City', children: [
          { name: 'Jane Smith', age: 25, address: 'Los Angeles' },
          { name: 'Bob Johnson', age: 35, address: 'San Francisco' }
        ] },
        { name: 'Alice Williams', age: 28, address: 'Chicago' }
      ]
    }
  },
  mounted() {
    VXETable.setup({
      version: 'pro'
    })
  },
  methods: {
    save() {
      const allData = this.$refs.grid.getTableData()
      console.log(allData)
      // 在这里可以将 allData 发送到后端进行保存操作
    }
  }
}
</script>
<p>这个示例中，我们使用了 vxe-table 组件库来实现树形表格，并通过 <code>tree-config</code> 属性指定了树形结构的配置。<code>columns</code> 属性定义了表格的列，<code>data</code> 属性定义了表格的数据。</p>
<p>在 <code>save</code> 方法中，我们通过 <code>this.$refs.grid.getTableData()</code> 获取到了完整的表格数据，然后可以将数据发送到后端进行保存操作。</p>
<p>请注意，这只是一个简单的示例，实际项目中还需要根据具体需求进行适当的调整和处理。</p>