Vue3 Antd 父子嵌套子表格
父子嵌套子表格
目标1:可以点击多个父节点表格,正确显示子表格数据
目标2:父表格数据刷新重载,解决子表格数据不刷新问题
官方示例代码,以及效果
https://www.antdv.com/components/table-cn#components-table-demo-nested-table
可以看到官方示例十分简单,使用了 <template #expandedRowRender> 插槽效果,并没有后续的示例
<template #expandedRowRender>
<a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
<template #bodyCell="{ column }">
<template v-if="column.key === 'state'">
<span>
<a-badge status="success" />
Finished
</span>
</template>
<template v-else-if="column.key === 'operation'">
<span class="table-operation">
<a>Pause</a>
<a>Stop</a>
<a-dropdown>
<template #overlay>
<a-menu>
<a-menu-item>Action 1</a-menu-item>
<a-menu-item>Action 2</a-menu-item>
</a-menu>
</template>
<a>
More
<down-outlined />
</a>
</a-dropdown>
</span>
</template>
</template>
</a-table>
</template>
解决方案
使用@expand事件解决
<a-table @expand="rowExpand" :loading="tableLoading" @change="tableChange"
:pagination="tablePagination" :columns="columns" :data-source="financeData"
:scroll="{ x: 1300, y: 1000 }" class="components-table-demo-nested"
:rowKey="(record,index)=>{return record.id}" bordered>
<template #expandedRowRender="{record}">
<a-table :columns="innerColumns" :data-source="innerDataMap[record.id]" :rowKey="(record,index)=>{return record.id}"
:pagination="false">
</a-table>
</template>
<span class="table-operation" @click="handleFinance(record)">
<a-button type="link">处理
<template #icon><EditTwoTone/></template>
</a-button>
</span>
</template>
</a-table>
首先我们需要一个const expandedRowKeys = ref([]) 一个列表临时存储点击展开的节点。
@expand=“rowExpand” 方法,监听展开的节点,把节点添加到缓存对象中
function rowExpand(isExpand, record) {
//提前为map.key =value 初始化一个空数组
if (!innerDataMap.value[record.id]) {
innerDataMap.value[record.id] = [];
}
if (isExpand) {
// 将展开的行的 id 添加到 expandedRowKeys 数组中
expandedRowKeys.value.push(record.id);
// 将对应的子表格数据添加到 innerDataMap 中
innerDataMap.value[record.id] = record.clist;
} else {
// 将展开的行的 id 从 expandedRowKeys 数组中删除
const index = expandedRowKeys.value.indexOf(record.id);
if (index > -1) {
expandedRowKeys.value.splice(index, 1);
}
// 将对应的子表格数据从 innerDataMap 中删除
delete innerDataMap.value[record.id];
}
}
可以看到嵌套子表格使用innerDataMap是一个Map而不是List,好处是,表格行数据更新,或者点击表格上方查询表格时,可以根据Map[Key]的方式刷新子表格数据文章来源:https://www.toymoban.com/news/detail-428449.html
<template #expandedRowRender="{record}">
<a-table :columns="innerColumns" :data-source="innerDataMap[record.id]" :rowKey="(record,index)=>{return record.id}"
:pagination="false">
</a-table>
</template>
点击处理按钮,修改当前父表格下子表格数据,这时候需要回调reload()重新加载表格,由于使用expandedRowKeys参数记录展开节点,只需要在请求父表格接口时候遍历更新innerDataMap容器就可以了。文章来源地址https://www.toymoban.com/news/detail-428449.html
reload(){
queryIList(toData)
.then((res) => {
financeData.value = res['list']
tablePagination.total = res.totalCount
// 获取当前展开的所有行的 ID
const expandedRowIds = expandedRowKeys.value;
// 遍历展开的行,更新对应的子表格数据
expandedRowIds.forEach(id => {
const record = financeData.value.find(record => record.id === id);
if (record) {
innerDataMap.value[id] = record.clist;
}
});
})
.catch((e) => {
console.log('e', e);
}).finally(() => {
tableLoading.value = false
});
}
到了这里,关于Vue3 Antd 父子嵌套子表格的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!