antd vue table 嵌套子表格

近日，在操作一个列表页的时候，需要点击某一行数据的操作按钮打开一个本行数据相关的列表，

之前都是用modal 打开弹窗的形式实现的，这次想试一下嵌套子表格：

参照antd官网上的例子，在table中写入一个插槽 slot="expandedRowRender",写了这个插槽之后页面表格中就会给每一行前面增加了一个小图标，点击可以展开此行，由于子表格的内容需要根据所选目标行的信息去加载，于是在展开行的方法中去发送请求外层的table设定expand方法 @expand="viewVideoList"， 在这个方法中请求到数据作为子表格的dataSource。

<a-table
      class="tablebgf"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="pagination"
      :loading="loading"
      size="middle"
      @change="handleTableChange"
      @expand="viewVideoList"
    
    >   

      <a-table
        slot="expandedRowRender"
        slot-scope="record"
        :columns="columnsVideoList"
        :dataSource="record.videoList"
        :pagination="false"
        rowKey="id"
      >
      </a-table>
    </a-table>

viewVideoList(expanded, record) {
      console.log("打开", expanded, record);
      if (expanded) {
        this.$post("/trainingPerson/findByone", {
          trainId: this.trainId,
          perId: record.perId,
        }).then((res) => {
          console.log("视频列表", res);
          record.videoList = res.data;
        });
      }
    },

这样就实现了子表格嵌套，而且每行数据互不影响