vue3 组合式 ant.design组件Table嵌套表格，从后端获取数据并动态渲染

这篇具有很好参考价值的文章主要介绍了vue3 组合式 ant.design组件Table嵌套表格，从后端获取数据并动态渲染。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在根据官方文档使用ant.design中的嵌套表格时，发现官方文档很多地方都不够详细。在过程中踩了不少坑，例如：

子表如何获取父表的数据？

如何获取子表的行索引？

如何让子表的数据源来自父表该行的数据？

总之，最后还是磕磕绊绊做完了功能，于是第一时间把代码整理出来以作分享。

首先，后端返回的数据是json格式。文章来源地址https://www.toymoban.com/news/detail-616376.html

后端返回数据格式如下：

{
    "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
}

前端渲染的数据格式如下：

[
    {
        "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里面的元素可以使用大括号内的值。其中record是父表内一行的数据，index是行的索引，indent是缩进，expanded表示是否展开。

                <div class="child">

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


//表示子表的数据源来自父表record一行数据的innerDatas

                        <template #bodyCell="{ text, record, index, column}"> 
//text表示该行该列也就是这个单元格内的值，record表示子表一行的数据，index表示子表行的索引，column表示子表的列。同样的，该插槽放在父表内表示的就是父表的数据。

                            <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弹窗，当点击“详细”时显示子表中editComment的内容

                        </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 = [ //父表的列设置

    { title: '标题', dataIndex: 'name', key: 'name', className: 'thChange', width: 400 },

    { title: '副标题', 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 = [ //子表的列设置

    { 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 { //父表的数据类型定义，我在这里直接把子表的内容放在了父表中

    key: number;

    name: string;

    subSystem: string;

    type: string;

    expand: any;

    innerDatas: innerDataItem[]

}

interface innerDataItem { //子表的数据类型定义

    key: number;

    ID: string;

    version: string;

    editComment: string;

    editTime: string;

    more: string

}

let innerData= reactive<Array<innerDataItem>>([])  //定义一个innerDataItem类型的响应式数组存放子表的数据

const dataList = reactive<Array<DataItem>>([]) //定义一个DataItem类型的响应式数组存放父表的数据

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

    .then((res) => {

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

            innerData = [];    //每次循环将子表数据清空 确保子表数组中的只有父表这一行对应的子表数据而不是子表所有的数据

            for (let j = 0; j < res.data.data[i].history.length; 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({ //父表数据存入

                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>

到了这里，关于vue3 组合式 ant.design组件Table嵌套表格，从后端获取数据并动态渲染的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！