antd vue table nested subtable

Recently, when operating a list page, you need to click the operation button of a certain row of data to open a list related to the data of this row.

Previously, this was done by using modal to open a pop-up window. This time I want to try nested subtables:

Referring to the example on the antd official website, write a slot = "expandedRowRender" in the table. After writing this slot, a small icon will be added in front of each row in the page table. Click to expand the row. Since the sub- The content of the table needs to be loaded according to the information of the selected target row, so in the method of expanding the row, the request is sent to the outer table setting expand method @expand="viewVideoList". In this method, the data is requested as a subtable 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;
        });
      }
    },

In this way, nesting of subtables is achieved, and each row of data does not affect each other.