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

<p>&quot;<template>\n  <div>\n    &lt;vxe-table\n      ref=&quot;table&quot;\n      :data=&quot;tableData&quot;\n      border\n      show-overflow=&quot;ellipsis&quot;\n      highlight-current-row\n      :edit-config=&quot;{ trigger: 'click', mode: 'row', showStatus: true }&quot;\n      @edit=&quot;handleEdit&quot;\n      @save=&quot;handleSave&quot;\n    &gt;\n      &lt;vxe-table-column type=&quot;index&quot; width=&quot;60&quot; /&gt;\n      &lt;vxe-table-column field=&quot;name&quot; title=&quot;名称&quot; width=&quot;150&quot; editable /&gt;\n      &lt;vxe-table-column field=&quot;age&quot; title=&quot;年龄&quot; width=&quot;150&quot; editable /&gt;\n      &lt;vxe-table-column field=&quot;address&quot; title=&quot;地址&quot; width=&quot;300&quot; editable /&gt;\n      &lt;vxe-table-column field=&quot;description&quot; title=&quot;描述&quot; width=&quot;300&quot; editable /&gt;\n      &lt;vxe-table-column field=&quot;actions&quot; title=&quot;操作&quot; width=&quot;120&quot; fixed=&quot;right&quot; :showOverflow=&quot;false&quot;&gt;\n        &lt;template #default=&quot;{ row }&quot;&gt;\n          &lt;vxe-button type=&quot;primary&quot; size=&quot;small&quot; @click=&quot;saveRow(row)&quot;&gt;保存</vxe-button>\n        </template>\n      </vxe-table-column>\n    </vxe-table>\n    &lt;vxe-button type=&quot;primary&quot; @click=&quot;saveAll&quot;&gt;保存全部</vxe-button>\n  </div>\n</template>\n\n<script>\n export default {\n  data() {\n    return {\n      tableData: [\n        {\n          id: 1,\n          name: 'John',\n          age: 25,\n          address: 'New York',\n          description: 'Lorem ipsum dolor sit amet',\n          editStatus: false\n        },\n        {\n          id: 2,\n          name: 'Jane',\n          age: 30,\n          address: 'Los Angeles',\n          description: 'Consectetur adipiscing elit',\n          editStatus: false\n        },\n        // Add more data here...\n      ]\n    }\n  },\n  methods: {\n    handleEdit({ row }) {\n      row.editStatus = true;\n    },\n    handleSave({ row }) {\n      row.editStatus = false;\n    },\n    saveRow(row) {\n      row.editStatus = false;\n      // Perform save operation for an individual row\n      console.log('Saving row:', row);\n    },\n    saveAll() {\n      const editedRows = this.tableData.filter(row =&gt; row.editStatus);\n      // Perform save operation for all edited rows\n      console.log('Saving all edited rows:', editedRows);\n    }\n  }\n}\n</script>\n&quot; 该示例代码使用 vxe-table 组件创建了一个树形表格，并通过 edit-config 属性配置了点击行触发编辑模式。表格中每个数据项包含一个 editStatus 属性，用于表示当前行是否处于编辑状态。编辑模式下，可以使用 handleEdit 和 handleSave 方法监听编辑和保存事件，并更新对应行的 editStatus 属性。在每个数据行的操作列中添加了一个保存按钮，用于保存单个数据行。最后，一个 “保存全部” 按钮可以保存所有处于编辑状态的数据行。该代码示例提供了完整的代码实现，并对代码的关键部分进行了注释，方便理解和应用。\n</p>