Ant Design Vue子表格展开折叠及传值
首先这是你想实现的效果嘛?如果是的话看这篇就够了,我会写的很详细!第一步在表格里插入一个表格<a-table:expandRowByClick="true":columns="columns":data-source="datas":loading="loading"@expand="zi"><template #expandedRowRender="{ record }">
·
首先这是你想实现的效果嘛?
如果是的话看这篇就够了,我会写的很详细!
第一步在表格里插入一个表格
<a-table
:expandRowByClick="true"
:columns="columns"
:data-source="datas"
:loading="loading"
@expand="zi"
>
<template #expandedRowRender="{ record }">
<a-table
size="small"
:expandRowByClick="true"
:columns="columns2"
:data-source="data2"
:loading="loading"
/>
</template>
</a-table>
关键属性:
#expandedRowRender:这个是负责让列表可以折叠的属性
record:这个则是点击行的所有属性;如果不懂表格如何插入的话请点击,蓝色字体我教你
@expand:点击展开图标时触发(这是官网的说法,但我自己用的过程中是点击列表行就触发),可以获取到行的数据,有两个回调参数,Function(expanded(布尔值), record(行的数据))
调取数据
const zi = (expanded, record) => {
if (expanded) {
data2.value = [];
delAxios
.get({
url: `http://*****`,
})
.then((res) => {
data2.value = res.data.list;
});
}
下面是回调返回的数据:
这里因为点击就会触发这个函数,所以我用了一个判断,为true时才请求数据
最后
认识一下吧?你的关注是博主创作的最大动力,感谢!
- 想跟博主交朋友的可以查找,公_号❤:前端老实人,跟博主一起探讨学习❤
更多推荐
已为社区贡献25条内容
所有评论(0)