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

<p>&quot;<template>\n  <div>\n    &lt;vxe-table\n      ref=&quot;treeTable&quot;\n      :data=&quot;treeData&quot;\n      :edit-config=&quot;editConfig&quot;\n      height=&quot;400px&quot;\n      show-footer&gt;\n      <vxe-table-column type="selection" width="60"></vxe-table-column>\n      <vxe-table-column field="name" title="名称"></vxe-table-column>\n      <vxe-table-column field="age" title="年龄"></vxe-table-column>\n      <vxe-table-column field="gender" title="性别"></vxe-table-column>\n      <vxe-table-column field="address" title="地址"></vxe-table-column>\n    </vxe-table>\n    <div class="btn-group">\n      &lt;button @click=&quot;edit&quot;&gt;编辑</button>\n      &lt;button @click=&quot;save&quot;&gt;保存</button>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { VXETable } from 'vxe-table'\nimport 'vxe-table/lib/index.css'\n\nexport default {\n  data() {\n    return {\n      treeData: [\n        { id: 1, name: '张三', age: 20, gender: '男', address: '北京市朝阳区' },\n        { id: 2, name: '李四', age: 25, gender: '男', address: '上海市浦东新区' },\n        { id: 3, name: '王五', age: 30, gender: '女', address: '广州市天河区' }\n      ],\n      editConfig: {\n        mode: 'cell'\n      },\n      editedData: []\n    }\n  },\n  methods: {\n    edit() {\n      this.$refs.treeTable.edit('all')\n    },\n    save() {\n      this.editedData = VXETable.getPendingRecords(this.$refs.treeTable, { removed: false, revert: false })\n      // 在这里可以将editedData发送到后端进行保存操作\n      console.log(this.editedData)\n    }\n  }\n}\n</script>\n\n<style>\n.btn-group {\n  margin-top: 20px;\n  text-align: center;\n}\n\n.btn-group button {\n  margin-right: 10px;\n}\n</style>\n&quot;。代码中使用了 VXE 树形表格组件，展示了如何使用该组件进行多条数据的编辑和统一保存。首先，通过 <code>vxe-table</code> 标签创建树形表格，并使用 <code>vxe-table-column</code> 标签定义各个列的字段和标题。然后，通过 <code>editConfig</code> 属性配置表格的编辑模式，并使用 <code>this.$refs.treeTable.edit('all')</code> 方法开启编辑模式。最后，使用 <code>VXETable.getPendingRecords</code> 方法获取编辑后的数据，并将其保存到 <code>editedData</code> 中。\n</p>