1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > antd vue table 嵌套子表格

antd vue table 嵌套子表格

时间:2022-05-11 07:38:58

相关推荐

antd vue table 嵌套子表格

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

之前都是用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;});}},

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。