近日,在操作一个列表页的时候,需要点击某一行数据的操作按钮打开一个本行数据相关的列表,
之前都是用modal 打开弹窗的形式实现的,这次想试一下嵌套子表格:
参照antd官网上的例子,在table中写入一个插槽 slot="expandedRowRender",写了这个插槽之后页面表格中就会给每一行前面增加了一个小图标,点击可以展开此行,由于子表格的内容需要根据所选目标行的信息去加载,于是在展开行的方法中去发送请求外层的table设定expand方法 @expand="viewVideoList", 在这个方法中请求到数据作为子表格的dataSource。
<a-tableclass="tablebgf"rowKey="id":columns="columns":dataSource="dataSource":pagination="pagination":loading="loading"size="middle"@change="handleTableChange"@expand="viewVideoList"> <a-tableslot="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;});}},
这样就实现了子表格嵌套,而且每行数据互不影响