VXE Tree Grid with Multiple Data Editing and Unified Saving - Complete Code Example

<p>&quot;<template>\n  <div>\n    &lt;vxe-grid ref=&quot;grid&quot; :data=&quot;data&quot; :edit-config=&quot;{ mode: 'cell' }&quot; @edit-closed=&quot;handleEditClosed&quot;&gt;\n      <vxe-column type="index" width="60"></vxe-column>\n      <vxe-column field="name" title="Name" width="150" editable></vxe-column>\n      <vxe-column field="age" title="Age" width="80" editable></vxe-column>\n      <vxe-column field="address" title="Address" width="200" editable></vxe-column>\n      <vxe-column field="phone" title="Phone" width="120" editable></vxe-column>\n      <vxe-column field="email" title="Email" width="200" editable></vxe-column>\n      <vxe-column type="expand"></vxe-column>\n    </vxe-grid>\n    &lt;el-button type=&quot;primary&quot; @click=&quot;save&quot;&gt;Save</el-button>\n  </div>\n</template>\n\n<script>\nimport { VXETable, XEUtils } from 'vxe-table'\nimport 'vxe-table/lib/style.css'\nimport { ElButton } from 'element-ui'\nimport 'element-ui/lib/theme-chalk/index.css'\n\nexport default {\n  components: {\n    ElButton\n  },\n  data() {\n    return {\n      data: [\n        {\n          name: 'John Doe',\n          age: 30,\n          address: '123 Main St',\n          phone: '555-1234',\n          email: 'john@example.com'\n        },\n        {\n          name: 'Jane Smith',\n          age: 25,\n          address: '456 Elm St',\n          phone: '555-5678',\n          email: 'jane@example.com'\n        },\n        {\n          name: 'Bob Johnson',\n          age: 40,\n          address: '789 Oak St',\n          phone: '555-9012',\n          email: 'bob@example.com'\n        }\n      ]\n    }\n  },\n  mounted() {\n    VXETable.setup({\n      table: {\n        autoResize: true,\n        border: true\n      }\n    })\n  },\n  methods: {\n    handleEditClosed({ row }) {\n      // Update the data item with the new values\n      XEUtils.assign(row, this.$refs.grid.getRowNode(row).item)\n    },\n    save() {\n      // Get the edited data\n      const editedData = this.$refs.grid.getRecordset().filter(item =&gt; item._rowStatus === 'edit')\n\n      // Perform save operation with editedData\n      // ...\n\n      // Reset the edited status\n      editedData.forEach(item =&gt; {\n        item._rowStatus = null\n      })\n    }\n  }\n}\n</script>\n\n<style>\n/* Add custom styles here */\n</style>&quot; This code utilizes the <code>vxe-grid</code> component to create a tree-like grid. The <code>edit-config</code> property is set to <code>{ mode: 'cell' }</code>, enabling cell editing. Columns with the <code>editable</code> attribute set to <code>true</code> are made editable.  The <code>handleEditClosed</code> method captures edited row data and updates the original data item. The <code>save</code> button's click event obtains all edited data items using <code>getRecordset</code> for saving, and then resets the edited status by setting <code>_rowStatus</code> to <code>null</code>. Remember, this is a basic example, and modifications may be necessary based on your specific needs. You'll also need to install and import the VXE Table and Element UI libraries, along with any additional styles and configurations.</p>