ant-design-vue 3.2
前端代码
<template>
<a-table
:rowKey="key"
:columns="columns"
:data-source="defState.data"
:pagination="false">
<!--
<template #expandedRowRender> 修改成如下内容,
并通过父表格的行序号,获取子表格数据源列表对应的内容
-->
<template #expandedRowRender="{ record }">
<a-table
:columns="innerColumns"
:data-source="defState.innerData[record.key]"
:pagination="false"
:customHeaderRow="customHeaderRow">
</a-table>
</template>
</a-table>
</template>
---------------
---------------
const defState = reactive({
'data': [],
'innerData':[],
});
const getManpowerCustomerTaskSummaryFunc = () => {
getManpowerCustomerTaskWeekSummaryApi()
.then((response) => {
defState.data = response.data.customerTask.customerList;
defState.innerData = response.data.customerTask.customerContainList;
})
};
后台接口内容
{
"code":1,
"msg":"ok",
"data":{
"customerTask":{
"customerList":[
'父表格第1行',
'父表格第2行',
'父表格第3行',
'父表格第4行'
],
"customerContainList":[
[{父表格第1行扩展的子表格第一行}],
[{父表格第2行扩展的子表格第一行}],
[{父表格第3行扩展的子表格第一行}],
[{父表格第4行扩展的子表格第一行},{父表格第4行扩展的子表格第二行}]
]
}
}
}
效果图