vxe-table 更新数据

VxeTable 是 Vue 电子表格组件库 Vuetify 组件套件的一个强大组件，用于展示和操作表格数据。更新 VxeTable 的数据通常涉及以下几个步骤：

1. **绑定数据到组件**: 首先需要在你的 Vue 实例中通过 `v-model` 或者 `ref` 将数据绑定到 VxeTable 的 `data-source` 属性上。例如：

<template>
  <vxe-table :data-source="tableData" />
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 初始化的数据数组
    };
  },
  //...
}
</script>

2. **修改数据**: 当你需要更新数据时，直接对 `tableData` 数组进行增删改查操作即可。比如添加新行：

this.tableData.push({
  column1: 'New Data',
  column2: 'Value'
});

3. **触发表单刷新**: 如果你想让用户看到新的数据变化，可以手动调用 VxeTable 的 `refresh` 方法，或者利用 Vue 的响应式特性，当数据源改变时自动触发更新：

// 更新数据后手动刷新
this.$nextTick(() => {
  this.$refs.vxeTable.refresh();
});

// 或者利用 Vue 的 watch 监听数据变化
watch: {
  tableData(newData) {
    this.$refs.vxeTable.refresh();
  }
},

4. **状态管理工具**: 对于更复杂的项目，可能会使用 Vuex 或者其他状态管理库来统一数据变更，这时候只需在状态管理器中更改数据并通知视图。