antd嵌套表格的使用

遇到一个需求就是在表格里面嵌套一个子表格，然后父表格展开的时候，根据id查询出该表格下的子表格。
刚开始我查antd的文档的时候是参照以下的表格写的

<template>
  <a-table :columns="columns" :dataSource="data" class="components-table-demo-nested">
    <a slot="operation" slot-scope="text">Publish</a>
    <a-table
      slot="expandedRowRender"
      slot-scope="text"
      :columns="innerColumns"
      :dataSource="innerData"
      :pagination="false"
    >
      <span slot="status" slot-scope="text"> <a-badge status="success" />Finished </span>
      <span slot="operation" slot-scope="text" class="table-operation">
        <a>Pause</a>
        <a>Stop</a>
        <a-dropdown>
          <a-menu slot="overlay">
            <a-menu-item>
              Action 1
            </a-menu-item>
            <a-menu-item>
              Action 2
            </a-menu-item>
          </a-menu>
          <a> More <a-icon type="down" /> </a>
        </a-dropdown>
      </span>
    </a-table>
  </a-table>
</template>
<script>
const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Platform', dataIndex: 'platform', key: 'platform' },
  { title: 'Version', dataIndex: 'version', key: 'version' },
  { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
  { title: 'Creator', dataIndex: 'creator', key: 'creator' },
  { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
  { title: 'Action', key: 'operation', scopedSlots: { customRender: 'operation' } },
];

const data = [];
for (let i = 0; i < 3; ++i) {
  data.push({
    key: i,
    name: 'Screem',
    platform: 'iOS',
    version: '10.3.4.5654',
    upgradeNum: 500,
    creator: 'Jack',
    createdAt: '2014-12-24 23:12:00',
  });
}

const innerColumns = [
  { title: 'Date', dataIndex: 'date', key: 'date' },
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Status', key: 'state', scopedSlots: { customRender: 'status' } },
  { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
  {
    title: 'Action',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];

const innerData = [];
for (let i = 0; i < 3; ++i) {
  innerData.push({
    key: i,
    date: '2014-12-24 23:12:00',
    name: 'This is production name',
    upgradeNum: 'Upgraded: 56',
  });
}

export default {
  data() {
    return {
      data,
      columns,
      innerColumns,
      innerData,
    };
  },
};
</script>

可是我遇到一个问题就是：展开父表格的时候，发送的是同一个请求，没有取到父表格id去获取子表格，然后通过查找资料，发现了父表格拥有一个属性@expand，设置这个属性就可以在展开表格的动作中，带上该父表格的信息。
以下是嵌套表格的代码:

<div>
      <a-table
        :columns="columns"
        rowKey="id"
        @expand="expand"  //**展开父表格的属性**
        size="middle"
        :pagination="false"
        :expandedRowKeys="expandedRowKeys"
        :dataSource="dataSource"
        :loading="loading"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
        </span>
        <a-table
          slot="expandedRowRender"
          slot-scope="text, record"
          bordered
          :columns="innerColumns"
          :title="onHeaderCell"
          :dataSource="innerData"
          :pagination="false"
        >
          <!-- <span slot="addDbUser" slot-scope="text, record">
            <a-button @click="addDbUser(record)">新增数据库用户</a-button>
          </span>-->
          <span slot="innerAction" slot-scope="text, record">
            <a @click="deleteDbUser(record)">删除</a>
          </span>
        </a-table>
      </a-table>
    </div>

以下是expand的函数：

expand(expanded, record) {
      this.isExpend = expanded;
      this.expandedRowKeys = []; // 重置展开节点，只展开当前点击的节点（内部数据调用模板，无法做到同时几个内层表格数据直接缓存在页面）
      if (expanded) {
        this.expandedRowKeys = [record.id];
        //**发送获取子表格的请求**
        this.loadInnerData(this.expandedRowKeys[0]);
      }
      console.log(expanded, record);
    },