近日,在操作一个列表页的时候,需要点击某一行数据的操作按钮打开一个本行数据相关的列表,
之前都是用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;
});
}
},
这样就实现了子表格嵌套,而且每行数据互不影响