在根據(jù)官方文檔使用ant.design中的嵌套表格時，發(fā)現(xiàn)官方文檔很多地方都不夠詳細。在過程中踩了不少坑，例如：

子表如何獲取父表的數(shù)據(jù)？

如何獲取子表的行索引？

如何讓子表的數(shù)據(jù)源來自父表該行的數(shù)據(jù)？

總之，最后還是磕磕絆絆做完了功能，于是第一時間把代碼整理出來以作分享。

首先，后端返回的數(shù)據(jù)是json格式。文章來源地址http://www.zghlxwxcb.cn/news/detail-616376.html

后端返回數(shù)據(jù)格式如下：

{
    "result": true,
    "errorCode": null,
    "errorMsg": null,
    "data": [
        {
            "id": "001",
            "name": "A",
            "releaseVersion": "v2.00.02",
            "subSystem": "a",
            "type": "edit",
            "history": [
                {
                    "editVersion": 1,
                    "timestamp": "2023/05/08 12:23",
                    "comment": "備注1.1"
                },
                {
                    "editVersion": 2,
                    "timestamp": "2023/05/08 12:23",
                    "comment": "備注1.2"
                }
            ]
        },
        {
            "id": "002",
            "name": "B",
            "releaseVersion": "v2.00.01",
            "subSystem": "b",
            "type": "edit",
            "history": [
                {
                    "editVersion": 1,
                    "timestamp": "2023/05/08 12:23",
                    "comment": "備注2.1"
                },
                {
                    "editVersion": 2,
                    "timestamp": "2023/05/08 12:23",
                    "comment": "備注2.2"
                }
            ]
        }
    ],
    "recordsTotal": 123
}

前端渲染的數(shù)據(jù)格式如下：

[
    {
        "key": 0,
        "name": "A",
        "subSystem": "a",
        "type": "edit",
        "expand": " ",
        "innerDatas": [
            {
                "key": 0,
                "ID": "001",
                "version": "v2.00.021",
                "editComment": "備注1.1",
                "editTime": "2023/05/08 12:23",
                "more": " "
            },
            {
                "key": 0,
                "ID": "001",
                "version": "v2.00.022",
                "editComment": "備注1.2",
                "editTime": "2023/05/08 12:23",
                "more": " "
            }
        ]
    },
    {
        "key": 1,
        "name": "B",
        "subSystem": "b",
        "type": "edit",
        "expand": " ",
        "innerDatas": [
            {
                "key": 1,
                "ID": "002",
                "version": "v2.00.011",
                "editComment": "備注2.1",
                "editTime": "2023/05/08 12:23",
                "more": " "
            },
            {
                "key": 1,
                "ID": "002",
                "version": "v2.00.012",
                "editComment": "備注2.2",
                "editTime": "2023/05/08 12:23",
                "more": " "
            }
        ]
    }
        ]

代碼：

<template>

? ? <div id="main">

? ? ? ? <a-table>

? ? ? ? ? ? <template #expandedRowRender="{record}"> 
//這一行代碼的意思是添加了一個插槽，#expandedRowRender="{record, index, indent, expanded}"，template里面的元素可以使用大括號內(nèi)的值。其中record是父表內(nèi)一行的數(shù)據(jù)，index是行的索引，indent是縮進，expanded表示是否展開。

? ? ? ? ? ? ? ? <div class="child">

? ? ? ? ? ? ? ? ? ? <a-table?:columns="innerColumns" :data-source="record.innerDatas"?>


//表示子表的數(shù)據(jù)源來自父表record一行數(shù)據(jù)的innerDatas

? ? ? ? ? ? ? ? ? ? ? ? <template #bodyCell="{ text, record, index, column}"> 
//text表示該行該列也就是這個單元格內(nèi)的值，record表示子表一行的數(shù)據(jù)，index表示子表行的索引，column表示子表的列。同樣的，該插槽放在父表內(nèi)表示的就是父表的數(shù)據(jù)。

? ? ? ? ? ? ? ? ? ? ? ? ? ? <template v-if="column.key === 'more'"> 
//這表示子表里column.key為more的這一列，都顯示“詳細”

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a @click="cilikRow = index, modalVisible = cilikRow > -1" >

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 詳細

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? </template>

? ? ? ? ? ? ? ? ? ? ? ? </template>

? ? ? ? ? ? ? ? ? ? </a-table>

? ? ? ? ? ? ? ? ? ? <div class="createModel" ref="createModel">

? ? ? ? ? ? ? ? ? ? ? ? <a-modal v-model:visible="modalVisible" title=" ">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="modal-editComment">{{ dataList[0].innerDatas[cilikRow.valueOf()].editComment }}</p>?


//一個a-modal彈窗，當(dāng)點擊“詳細”時顯示子表中editComment的內(nèi)容

? ? ? ? ? ? ? ? ? ? ? ? </a-modal>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? </template>

? ? ? ? </a-table>

? ? </div>

</template>

<script lang="ts">

import { DownOutlined } from '@ant-design/icons-vue';

import { defineComponent } from 'vue';

import axios from 'axios';



const cilikRow = ref<Number>(-1)

const columns = [ //父表的列設(shè)置

? ? { title: '標(biāo)題', dataIndex: 'name', key: 'name', className: 'thChange', width: 400 },

? ? { title: '副標(biāo)題', dataIndex: 'subSystem', key: 'subSystem', className: 'thChange', width: 400 },

? ? { title: '類型', dataIndex: 'type', key: 'type', className: 'thChange', width: 550 },

? ? { title: ' ?', dataIndex: 'expand', key: 'expand', className: 'thChange', expandFixed: 'right' },

];

const innerColumns = [ //子表的列設(shè)置

? ? { title: 'ID', dataIndex: 'ID', key: 'ID', className: 'thColor', width: 100 },

? ? { title: '版本', dataIndex: 'version', key: 'version', width: 100 },

? ? { title: '編輯備注', dataIndex: 'editComment', key: 'editComment', ellipsis: true, width: 250 },

? ? { title: '編輯日期', dataIndex: 'editTime', key: 'editTime', width: 150 },

? ? { title: '', dataIndex: 'more', key: "more" }

];

interface DataItem { //父表的數(shù)據(jù)類型定義，我在這里直接把子表的內(nèi)容放在了父表中

? ? key: number;

? ? name: string;

? ? subSystem: string;

? ? type: string;

? ? expand: any;

? ? innerDatas: innerDataItem[]

}

interface innerDataItem { //子表的數(shù)據(jù)類型定義

? ? key: number;

? ? ID: string;

? ? version: string;

? ? editComment: string;

? ? editTime: string;

? ? more: string

}

let innerData= reactive<Array<innerDataItem>>([])??//定義一個innerDataItem類型的響應(yīng)式數(shù)組存放子表的數(shù)據(jù)

const dataList = reactive<Array<DataItem>>([])?//定義一個DataItem類型的響應(yīng)式數(shù)組存放父表的數(shù)據(jù)

axios.get('http://127.0.0.0/Test/Test123.json')

? ? .then((res) => {

? ? ? ? for (let i = 0; i < res.data.data.length; i++) {

? ? ? ? ? ? innerData = [];? ? //每次循環(huán)將子表數(shù)據(jù)清空 確保子表數(shù)組中的只有父表這一行對應(yīng)的子表數(shù)據(jù)而不是子表所有的數(shù)據(jù)

? ? ? ? ? ? for (let j = 0; j < res.data.data[i].history.length; j++) { //子表數(shù)據(jù)存入

? ? ? ? ? ? ? ? ? ? innerData.push({

? ? ? ? ? ? ? ? ? ? ? ? key: i,

? ? ? ? ? ? ? ? ? ? ? ? ID: res.data.data[i].id,

? ? ? ? ? ? ? ? ? ? ? ? version: res.data.data[i].releaseVersion + res.data.data[i].history[j].editVersion,

? ? ? ? ? ? ? ? ? ? ? ? editComment: res.data.data[i].history[j].comment,

? ? ? ? ? ? ? ? ? ? ? ? editTime: res.data.data[i].history[j].timestamp,

? ? ? ? ? ? ? ? ? ? ? ? more: " "

? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? }



? ? ? ? ? ? dataList.push({ //父表數(shù)據(jù)存入

? ? ? ? ? ? ? ? key: i,

? ? ? ? ? ? ? ? name: res.data.data[i].name,

? ? ? ? ? ? ? ? subSystem: res.data.data[i].subSystem,

? ? ? ? ? ? ? ? type: res.data.data[i].type,

? ? ? ? ? ? ? ? expand: " ",

? ? ? ? ? ? ? ? innerDatas:innerData? ? ? ? ? ? ? ?

? ? ? ? ? ? })? ? ? ? ? ? ? ? ? ? ?

? ? ? ? }? ? ??

? ? ? ? console.log(dataList)

? ? })

const modalVisible = ref<boolean>(false);

export default defineComponent({

? ? components: {

? ? ? ? DownOutlined,

? ? },

? ? setup() {

? ? ? ? return {

? ? ? ? ? ? modal: false,

? ? ? ? ? ? centerDialogVisible: false,

? ? ? ? ? ? modalVisible,

? ? ? ? ? ? dataList,

? ? ? ? ? ? columns,

? ? ? ? ? ? innerColumns,

? ? ? ? ? ? innerData,

? ? ? ? ? ? cilikRow,

? ? ? ? };

? ? },

});

</script>

到了這里，關(guān)于vue3 組合式 ant.design組件Table嵌套表格，從后端獲取數(shù)據(jù)并動態(tài)渲染的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！