vxe-table展开行嵌套子表，每个子表的数据都是接口获取，每次展开的子表的数据都不同。

我开始是这么写的

<vxe-table
    ref="tableRef"
    ...
    :data="data"
  >
    ...
    <vxe-column type="expand" title="展开行" width="120">
      <template #content="{ row }">
        <div class="expand-wrapper">
          <vxe-table
            border
            :loading="loading"
            :data="expandData" 
            ...
          >
            ...
          </vxe-table>
        </div>
      </template>
    </vxe-column>
    ...
  </vxe-table>

这样存在一个问题所有子表都绑定一个数据源，点开第一行的数据正常显示，点开第二行的时候第一行展开的子表数据和第二条展开的数据一样了。

要解决这个问题，你需要为每一行的展开内容维护一个独立的数据状态。这意味着每当你展开一行时，你应该检查是否已经为这一行加载过数据。如果已经加载过，就使用已有的数据；如果没有，就从接口获取数据并存储起来，以便下次展开时使用。

以下是解决方案的步骤：

1. 维护一个状态对象：这个对象的键是每行的唯一标识符（比如行的ID），值是对应行的展开数据。
2. 修改展开行的内容：在展开行的内容中，根据当前行的唯一标识符从状态对象中获取数据。
3. 获取数据的逻辑：在展开行时，检查状态对象中是否已经有了对应行的数据。如果没有，就从接口获取数据并更新状态对象。

以下是示例代码：

<template>
  <vxe-table
    ref="tableRef"
    ...
    :data="data"
    :expand-config="{ toggleMethod }"
  >
    ...
    <vxe-column type="expand" title="生成月计划" width="120">
      <template #content="{ row }">
        <div class="expand-wrapper">
          <!-- 使用 row 的唯一标识符来获取展开数据 -->
          <vxe-table
            border
            :loading="loading"
            :data="expandData[row.id] || []" <!-- 假设每行数据有唯一的 id 字段 -->
            ...
          >
            ...
          </vxe-table>
        </div>
      </template>
    </vxe-column>
    ...
  </vxe-table>
</template>

<script setup>
import { ref, reactive } from 'vue';

const data = ref([...]); // 主表格数据
const expandData = reactive({}); // 存储每行展开数据的对象

// 展开行事件处理函数
const toggleMethod= async ({ expanded, row }) => {
  if (expanded && !expandData[row.id]) {
    // 如果行被展开且该行数据未加载，则调用接口获取数据
    const rowData = await fetchDataForExpandRow(row.id); // fetchDataForExpandRow 是你的 API 调用函数
    expandData[row.id] = rowData; // 将获取到的数据存储
  }
};

// 其他逻辑...
</script>

在这个示例中，expandData对象用于存储每行的展开数据。当用户尝试展开一行时，toggleMethod函数会检查expandData中是否已经有了对应行的数据。如果没有，它会调用API获取数据并将其存储在expandData中，以便下次展开时直接使用，避免重复调用API。