表格合并单元格

方案一elemenui：

https://blog.csdn.net/weixin_41897680/article/details/121837200

方案二原生table：

页面HTML

<template>
    <section>
        <table class="go-table">
            <tr>
                <td>园区</td>
                <td>学院</td>
                <td>专业</td>
                <td>楼幢</td>
                <td>人数</td>
            </tr>
            <tr v-for="(row, key) in newList" :key="key">
                <template v-for="(cell, index) in row">
                    <td v-if="cell !== null" :key="index" 
                    :rowspan="mergeCell(key, index, 'c')"
                    >
                    <div :style="{'color':row.includes('合计')?'red':''}">  
                        {{ cell }}
                    </div>
                    </td>
                </template>
            </tr>
        </table>
    </section>
</template>



<style lang="less" scoped>
.go-table {
    border: 1px solid #e6e6e6;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    tr,
    td {
        border: 1px solid #e6e6e6;
        padding: 10px;
    }
}
</style>

对于数据的处理：

<script lang="ts">
import log from '@/router/module/asset/log';
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class extends Vue {
    listNew = [
        {
            name: 'a校区',
            children: [
                {
                    name: '成龙学院',
                    children: [
                        {
                            name: 'a专业',
                            children: [
                                {
                                    name: '1a楼',
                                    num: '18',
                                },
                                {
                                    name: '2a楼',
                                    num: '18',
                                },
                                {
                                    name: '3a楼',
                                    num: '18',
                                },
                            ],
                        },
                        {
                            name: 'b专业',
                            children: [
                                {
                                    name: 'a楼',
                                    num: '18',
                                },
                            ],
                        },
                    ],
                },
                {
                    name: '2成龙学院',
                    children: [
                        {
                            name: 'a专业',
                            children: [
                                {
                                    name: '1a楼',
                                    num: '18',
                                },
                                {
                                    name: '2a楼',
                                    num: '18',
                                },
                                {
                                    name: '3a楼',
                                    num: '18',
                                },
                            ],
                        },
                        {
                            name: 'b专业',
                            children: [
                                {
                                    name: 'a楼',
                                    num: '18',
                                },
                            ],
                        },
                    ],
                },
            ],
        },
        {
            name: 'b校区',
            children: [
                {
                    name: '成龙学院',
                    children: [
                        {
                            name: 'a专业',
                            children: [
                                {
                                    name: '1a楼',
                                    num: '18',
                                },
                                {
                                    name: '2a楼',
                                    num: '18',
                                },
                                {
                                    name: '3a楼',
                                    num: '18',
                                },
                            ],
                        },
                        {
                            name: 'b专业',
                            children: [
                                {
                                    name: 'a楼',
                                    num: '18',
                                },
                            ],
                        },
                    ],
                },
                {
                    name: '2成龙学院',
                    children: [
                        {
                            name: 'a专业',
                            children: [
                                {
                                    name: '1a楼',
                                    num: '18',
                                },
                                {
                                    name: '2a楼',
                                    num: '18',
                                },
                                {
                                    name: '3a楼',
                                    num: '18',
                                },
                                {
                                    name: '合计',
                                    num: '18',
                                },
                            ],
                        },
                        {
                            name: 'b专业',
                            children: [
                                {
                                    name: 'a楼',
                                    num: '18',
                                },
                            ],
                        },
                    ],
                },
            ],
        },
    ];
    /*  arr=[
        [],
        []
    ] */
    newMerge: any = [];
    formatData() {
        let merges = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 4 } }];
        let parentData: any = [];
        /* 遍历校区 */
        let merge1: any = [];
        let merge2: any = [];
        let merge3: any = [];
        let childData: any = [null, null, null, null, null];
        this.listNew.forEach((item, index1) => {
            childData[0] = item.name;
            if (merge1.length > 0) {
                merge1[merge1.length - 1].e = { r: parentData.length, c: 0 };
            }
            merge1.push({ s: { r: parentData.length, c: 0 }, e: { r: parentData.length, c: 0 } });
            if (item.children) {
                /* 遍历学院 */
                item.children.forEach((item2, index2) => {
                    childData[1] = item2.name;
                    if (merge2.length > 0) {
                        merge2[merge2.length - 1].e = { r: parentData.length, c: 1 };
                    }
                    merge2.push({ s: { r: parentData.length, c: 1 }, e: { r: parentData.length, c: 1 } });
                    if (item2.children) {
                        /* 专业  */
                        item2.children.forEach((item3, index3) => {
                            childData[2] = item3.name;
                            if (merge3.length > 0) {
                                merge3[merge3.length - 1].e = { r: parentData.length, c: 2 };
                            }
                            merge3.push({ s: { r: parentData.length, c: 2 }, e: { r: parentData.length, c: 2 } });
                            if (item3.children) {
                                /* 楼数 */
                                item3.children.forEach((item4, index4) => {
                                    childData[3] = item4.name;
                                    childData[4] = item4.num;
                                    parentData.push(childData);
                                    childData = [null, null, null, null, null];
                                });
                            }
                        });
                    }
                });
            }
        });
        this.newMerge = [...merge1, ...merge2,...merge3];
        merge1[merge1.length - 1].e = { r: parentData.length, c: 0 };
        merge2[merge2.length - 1].e = { r: parentData.length, c: 1 };
        merge3[merge3.length - 1].e = { r: parentData.length, c: 2 };
         
        this.newMerge = [...merge1, ...merge2,...merge3];
        return parentData;
    }
    merges = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 4 } }];

    mergeCell(r: number, c: number, type: 'c' | 'r') {
        return this.test(r, c, type, this.newMerge);
    }
    newList: any = [];
    created() {
        this.newList = this.formatData();
        /* (this.newList = [
            ['a学校', 'a学院', '汉语言文学1', '楼', '55'],
            [null, 'b学院', '汉语言文学2', '楼', '55'],
            [null, null, null, '楼', '55'],
            [null, null, null, '楼', '55'],
            ['b学校', null, null, '楼', '55'],
        ]), */
        console.log(this.newList, this.newMerge, 3333);
    }

   

    test(r: number, c: number, type: 'c' | 'r', merges: any[]) {
        const curr = { r, c };

        for (let i = 0; i < merges.length; i++) {
            const val = merges[i];
            if (val.s.r == curr.r && val.s.c === curr.c) {
                const { s, e } = val;
                const col = e.c - s.c,
                    row = e.r - s.r;
                    console.log(col,row,1111);
                    return row ? row  : null;  
                /* if (type === 'c') return col ? col + 1 : null;

                if (type === 'r') return row ? row + 1 : null; */
            }
        }

        return null;
    }
}
</script>