ant-table 嵌套子表格父子表格数据展示

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行扩展的子表格第二行}]
        ]
    }
}
}

效果图