前言：前篇已经完成导出复杂表格，现在需求合并单元格的情况下还需要把他展示出来此处使用的是vue2版本，vue3大体格式一样。
最后实现的效果如下图：
这是导出后的excel数据图片
el-table展示
一、树形数据结构 N_Num是指第一列需要合并的总数
let TestJSON = {
"data": [
{
"V_Room": "1#配电房",
"N_Num": 2,
"Child": [
{
"N_Id": 102,
"V_Code": "1TR_01",
"V_Transformer": "变压器1TR01",
"N_Capacity": 2500,
"N_TCmax": 606,
"N_TTmax": 34.5,
"N_TCavg": 385.01,
"N_TLmax": 15.72,
"N_TLavg": 10.38,
"N_Num": 1,
"Child": [
{
"N_Id": 2700,
"V_Generatrix": "阴极备料母线2",
"V_MainLoad": "阴极模切2",
"N_RatedCurrent": 1000,
"N_GCmax": 23.7,
"N_GTmax": 33.38,
"N_GCavg": 19.92,
"N_GLmax": 237,
"N_GLavg": 154.03
}
]
},
{
"N_Id": 143,
"V_Code": "1TR_02",
"V_Transformer": "变压器1TR02",
"N_Capacity": 2500,
"N_TCmax": 848,
"N_TTmax": 40,
"N_TCavg": 727.57,
"N_TLmax": 21.576,
"N_TLavg": 19.72,
"N_Num": 1,
"Child": [
{
"N_Id": 2701,
"V_Generatrix": "阴极模切母线",
"V_MainLoad": "阴极模切1",
"N_RatedCurrent": 3200,
"N_GCmax": 17.375,
"N_GTmax": 32.19,
"N_GCavg": 16.13,
"N_GLmax": 556,
"N_GLavg": 491.05
}
]
}
]
},
{
"V_Room": "2#配电房",
"N_Num": 4,
"Child": [
{
"N_Id": 202,
"V_Code": "2TR_01",
"V_Transformer": "变压器2TR01",
"N_Capacity": 2500,
"N_TCmax": 1927,
"N_TTmax": 71.8,
"N_TCavg": 1338.19,
"N_TLmax": 52,
"N_TLavg": 36.85,
"N_Num": 1,
"Child": [
{
"N_Id": 2702,
"V_Generatrix": "H2-1",
"V_MainLoad": "化成21LA面",
"N_RatedCurrent": 3200,
"N_GCmax": 44,
"N_GTmax": 45.13,
"N_GCavg": 27.15,
"N_GLmax": 1408,
"N_GLavg": 865.54
}
]
},
{
"N_Id": 229,
"V_Code": "2TR_02",
"V_Transformer": "变压器2TR02",
"N_Capacity": 2500,
"N_TCmax": 744,
"N_TTmax": 71.8,
"N_TCavg": 544.4,
"N_TLmax": 20.454,
"N_TLavg": 15.05,
"N_Num": 1,
"Child": [
{
"N_Id": 2703,
"V_Generatrix": "H2-2",
"V_MainLoad": "化成21LB面",
"N_RatedCurrent": 3200,
"N_GCmax": 17.531,
"N_GTmax": 39.21,
"N_GCavg": 11.6,
"N_GLmax": 585,
"N_GLavg": 373.39
}
]
},
{
"N_Id": 251,
"V_Code": "2TR_03",
"V_Transformer": "变压器2TR03",
"N_Capacity": 2000,
"N_TCmax": 744,
"N_TTmax": 71.8,
"N_TCavg": 564.18,
"N_TLmax": 24.892,
"N_TLavg": 19.4,
"N_Num": 1,
"Child": [
{
"N_Id": 2704,
"V_Generatrix": "H1-1",
"V_MainLoad": "化成22LA面",
"N_RatedCurrent": 3200,
"N_GCmax": 22.469,
"N_GTmax": 36.91,
"N_GCavg": 18.43,
"N_GLmax": 719,
"N_GLavg": 568.98
}
]
},
{
"N_Id": 271,
"V_Code": "2TR_04",
"V_Transformer": "变压器2TR04",
"N_Capacity": 2000,
"N_TCmax": 1582,
"N_TTmax": 71.8,
"N_TCavg": 1304.4,
"N_TLmax": 53.838,
"N_TLavg": 45.3,
"N_Num": 1,
"Child": [
{
"N_Id": 2705,
"V_Generatrix": "H1-2",
"V_MainLoad": "化成22LB面",
"N_RatedCurrent": 3200,
"N_GCmax": 44.812,
"N_GTmax": 40.66,
"N_GCavg": 37.23,
"N_GLmax": 1434,
"N_GLavg": 1177.74
}
]
}
]
},
{
"V_Room": "3#配电房",
"N_Num": 5,
"Child": [
{
"N_Id": 302,
"V_Code": "3TR_01",
"V_Transformer": "变压器3TR01",
"N_Capacity": 2500,
"N_TCmax": 1196,
"N_TTmax": 49.5,
"N_TCavg": 722.62,
"N_TLmax": 34.08,
"N_TLavg": 19.76,
"N_Num": 2,
"Child": [
{
"N_Id": 2706,
"V_Generatrix": "Sorting1",
"V_MainLoad": "Sorting",
"N_RatedCurrent": 1000,
"N_GCmax": 9.8,
"N_GTmax": 35.1,
"N_GCavg": 4.97,
"N_GLmax": 105,
"N_GLavg": 53.46
},
{
"N_Id": 2707,
"V_Generatrix": "R2-2",
"V_MainLoad": "容量21L的风机",
"N_RatedCurrent": 1250,
"N_GCmax": 14.88,
"N_GTmax": 42.45,
"N_GCavg": 13.34,
"N_GLmax": 186,
"N_GLavg": 160.06
}
]
},
{
"N_Id": 325,
"V_Code": "3TR_02",
"V_Transformer": "变压器3TR02",
"N_Capacity": 2500,
"N_TCmax": 1043,
"N_TTmax": 48.9,
"N_TCavg": 734.1,
"N_TLmax": 28.72,
"N_TLavg": 20.24,
"N_Num": 1,
"Child": [
{
"N_Id": 2708,
"V_Generatrix": "R2-1",
"V_MainLoad": "容量21L的风机",
"N_RatedCurrent": 1250,
"N_GCmax": 27.36,
"N_GTmax": 42.82,
"N_GCavg": 22.48,
"N_GLmax": 342,
"N_GLavg": 271.51
}
]
},
{
"N_Id": 353,
"V_Code": "3TR_03",
"V_Transformer": "变压器3TR03",
"N_Capacity": 2500,
"N_TCmax": 974,
"N_TTmax": 47.5,
"N_TCavg": 493.03,
"N_TLmax": 27.96,
"N_TLavg": 12.9,
"N_Num": 1,
"Child": [
{
"N_Id": 2709,
"V_Generatrix": "R1-2",
"V_MainLoad": "容量22L的风机",
"N_RatedCurrent": 1250,
"N_GCmax": 26,
"N_GTmax": 43.18,
"N_GCavg": 23.07,
"N_GLmax": 337,
"N_GLavg": 286.6
}
]
},
{
"N_Id": 375,
"V_Code": "3TR_04",
"V_Transformer": "变压器3TR04",
"N_Capacity": 2500,
"N_TCmax": 606,
"N_TTmax": 43.9,
"N_TCavg": 496.27,
"N_TLmax": 16.364,
"N_TLavg": 13.71,
"N_Num": 1,
"Child": [
{
"N_Id": 2710,
"V_Generatrix": "R1-1",
"V_MainLoad": "容量22L的风机",
"N_RatedCurrent": 1250,
"N_GCmax": 20.8,
"N_GTmax": 41.8,
"N_GCavg": 18.12,
"N_GLmax": 277,
"N_GLavg": 222.32
}
]
}
]
},
{
"V_Room": "4#配电房",
"N_Num": 2,
"Child": [
{
"N_Id": 502,
"V_Code": "4TR_01",
"V_Transformer": "变压器4TR01",
"N_Capacity": 2000,
"N_TCmax": 708,
"N_TTmax": 44.2,
"N_TCavg": 624.9,
"N_TLmax": 23.55,
"N_TLavg": 20.94,
"N_Num": 1,
"Child": [
{
"N_Id": 2711,
"V_Generatrix": "阳极模切母线1",
"V_MainLoad": "阴极模切2",
"N_RatedCurrent": 3200,
"N_GCmax": 2.053,
"N_GTmax": 35.65,
"N_GCavg": 1.84,
"N_GLmax": 65.8,
"N_GLavg": 57.9
}
]
},
{
"N_Id": 530,
"V_Code": "4TR_02",
"V_Transformer": "变压器4TR02",
"N_Capacity": 2000,
"N_TCmax": 521,
"N_TTmax": 39.2,
"N_TCavg": 453.88,
"N_TLmax": 16.85,
"N_TLavg": 15.2,
"N_Num": 1,
"Child": [
{
"N_Id": 2712,
"V_Generatrix": "阳极备料母线2",
"V_MainLoad": "阴极模切1",
"N_RatedCurrent": 1000,
"N_GCmax": 21.8,
"N_GTmax": 33.63,
"N_GCavg": 17.47,
"N_GLmax": 218,
"N_GLavg": 147.26
}
]
}
]
},
{
"V_Room": "5#配电房",
"N_Num": 4,
"Child": [
{
"N_Id": 602,
"V_Code": "5TR_01",
"V_Transformer": "变压器5TR01",
"N_Capacity": 2500,
"N_TCmax": 1333,
"N_TTmax": 55.8,
"N_TCavg": 1058.45,
"N_TLmax": 35.84,
"N_TLavg": 29,
"N_Num": 1,
"Child": [
{
"N_Id": 2713,
"V_Generatrix": "H3-1",
"V_MainLoad": "化成20LA面",
"N_RatedCurrent": 3200,
"N_GCmax": 27.469,
"N_GTmax": 31.39,
"N_GCavg": 20.82,
"N_GLmax": 0,
"N_GLavg": 0
}
]
},
{
"N_Id": 624,
"V_Code": "5TR_02",
"V_Transformer": "变压器5TR02",
"N_Capacity": 2500,
"N_TCmax": 934,
"N_TTmax": 55.8,
"N_TCavg": 538.28,
"N_TLmax": 24.98,
"N_TLavg": 15.06,
"N_Num": 1,
"Child": [
{
"N_Id": 2714,
"V_Generatrix": "H3-2",
"V_MainLoad": "化成20LB面",
"N_RatedCurrent": 3200,
"N_GCmax": 22.938,
"N_GTmax": 31.63,
"N_GCavg": 11.64,
"N_GLmax": 766,
"N_GLavg": 383.17
}
]
},
{
"N_Id": 649,
"V_Code": "5TR_03",
"V_Transformer": "变压器5TR03",
"N_Capacity": 2000,
"N_TCmax": 776,
"N_TTmax": 55.8,
"N_TCavg": 550.3,
"N_TLmax": 27.135,
"N_TLavg": 19.07,
"N_Num": 1,
"Child": [
{
"N_Id": 2715,
"V_Generatrix": "H4-1",
"V_MainLoad": "化成19LA面",
"N_RatedCurrent": 5000,
"N_GCmax": 24.312,
"N_GTmax": 29.21,
"N_GCavg": 17.34,
"N_GLmax": 778,
"N_GLavg": 550.24
}
]
},
{
"N_Id": 671,
"V_Code": "5TR_04",
"V_Transformer": "变压器5TR04",
"N_Capacity": 2000,
"N_TCmax": 765,
"N_TTmax": 55.8,
"N_TCavg": 597.29,
"N_TLmax": 26.615,
"N_TLavg": 20.7,
"N_Num": 1,
"Child": [
{
"N_Id": 2716,
"V_Generatrix": "H4-2",
"V_MainLoad": "化成19LB面",
"N_RatedCurrent": 4000,
"N_GCmax": 21.656,
"N_GTmax": 32.47,
"N_GCavg": 17.2,
"N_GLmax": 693,
"N_GLavg": 548.15
}
]
}
]
},
{
"V_Room": "6#配电房",
"N_Num": 5,
"Child": [
{
"N_Id": 702,
"V_Code": "6TR_01",
"V_Transformer": "变压器6TR01",
"N_Capacity": 2500,
"N_TCmax": 575,
"N_TTmax": 44.1,
"N_TCavg": 217.57,
"N_TLmax": 15.8,
"N_TLavg": 5.63,
"N_Num": 2,
"Child": [
{
"N_Id": 2717,
"V_Generatrix": "Sorting2",
"V_MainLoad": "Sorting",
"N_RatedCurrent": 800,
"N_GCmax": 10.375,
"N_GTmax": 35.29,
"N_GCavg": 2.9,
"N_GLmax": 84,
"N_GLavg": 24.31
},
{
"N_Id": 2718,
"V_Generatrix": "R3-2",
"V_MainLoad": "容量20L的风机",
"N_RatedCurrent": 1250,
"N_GCmax": 16.48,
"N_GTmax": 45.13,
"N_GCavg": 11.87,
"N_GLmax": 206,
"N_GLavg": 140.8
}
]
},
{
"N_Id": 727,
"V_Code": "6TR_02",
"V_Transformer": "变压器6TR02",
"N_Capacity": 2500,
"N_TCmax": 1041,
"N_TTmax": 48.3,
"N_TCavg": 681.52,
"N_TLmax": 28.646,
"N_TLavg": 18.71,
"N_Num": 1,
"Child": [
{
"N_Id": 2719,
"V_Generatrix": "R3-1",
"V_MainLoad": "容量20L的风机",
"N_RatedCurrent": 1250,
"N_GCmax": 17.04,
"N_GTmax": 40.42,
"N_GCavg": 13.53,
"N_GLmax": 228,
"N_GLavg": 168.78
}
]
},
{
"N_Id": 757,
"V_Code": "6TR_03",
"V_Transformer": "变压器6TR03",
"N_Capacity": 2500,
"N_TCmax": 804,
"N_TTmax": 44.8,
"N_TCavg": 347.05,
"N_TLmax": 21.778,
"N_TLavg": 8.53,
"N_Num": 1,
"Child": [
{
"N_Id": 2720,
"V_Generatrix": "R4-2",
"V_MainLoad": "容量19L的风机",
"N_RatedCurrent": 1250,
"N_GCmax": 14.56,
"N_GTmax": 41.39,
"N_GCavg": 10.47,
"N_GLmax": 186,
"N_GLavg": 129.88
}
]
},
{
"N_Id": 783,
"V_Code": "6TR_04",
"V_Transformer": "变压器6TR04",
"N_Capacity": 2500,
"N_TCmax": 1245,
"N_TTmax": 48.4,
"N_TCavg": 741.74,
"N_TLmax": 33.84,
"N_TLavg": 20.38,
"N_Num": 1,
"Child": [
{
"N_Id": 2721,
"V_Generatrix": "R4-1",
"V_MainLoad": "容量19L的风机",
"N_RatedCurrent": 1250,
"N_GCmax": 14.16,
"N_GTmax": 42.21,
"N_GCavg": 10.19,
"N_GLmax": 193,
"N_GLavg": 128.82
}
]
}
]
},
{
"V_Room": "7#配电房",
"N_Num": 4,
"Child": [
{
"N_Id": 902,
"V_Code": "7TR_01",
"V_Transformer": "变压器7TR01",
"N_Capacity": 2500,
"N_TCmax": 1578,
"N_TTmax": 58.6,
"N_TCavg": 923.03,
"N_TLmax": 41.172,
"N_TLavg": 24.26,
"N_Num": 2,
"Child": [
{
"N_Id": 2722,
"V_Generatrix": "阴极搅拌凹版母线1",
"V_MainLoad": "阴极搅拌凹版母线",
"N_RatedCurrent": 2000,
"N_GCmax": 28.5,
"N_GTmax": 40.98,
"N_GCavg": 15.39,
"N_GLmax": 598,
"N_GLavg": 311.04
},
{
"N_Id": 2723,
"V_Generatrix": "阴极搅拌凹版母线2",
"V_MainLoad": "阴极搅拌凹版母线",
"N_RatedCurrent": 2000,
"N_GCmax": 4.78,
"N_GTmax": 43.24,
"N_GCavg": 1.69,
"N_GLmax": 98.1,
"N_GLavg": 33.42
}
]
},
{
"N_Id": 939,
"V_Code": "7TR_02",
"V_Transformer": "变压器7TR02",
"N_Capacity": 2500,
"N_TCmax": 1780,
"N_TTmax": 62.7,
"N_TCavg": 1137.77,
"N_TLmax": 47.469,
"N_TLavg": 30.67,
"N_Num": 2,
"Child": [
{
"N_Id": 2724,
"V_Generatrix": "阴极搅拌凹版母线3",
"V_MainLoad": "阴极搅拌凹版母线",
"N_RatedCurrent": 2000,
"N_GCmax": 50,
"N_GTmax": 48.69,
"N_GCavg": 31.53,
"N_GLmax": 1012,
"N_GLavg": 623.48
},
{
"N_Id": 2725,
"V_Generatrix": "阴极搅拌凹版母线4",
"V_MainLoad": "阴极搅拌凹版母线",
"N_RatedCurrent": 2000,
"N_GCmax": 37.9,
"N_GTmax": 45.67,
"N_GCavg": 20.12,
"N_GLmax": 758,
"N_GLavg": 384.26
}
]
}
]
},
{
"V_Room": "8#配电房",
"N_Num": 4,
"Child": [
{
"N_Id": 1002,
"V_Code": "8TR_01",
"V_Transformer": "变压器8TR01",
"N_Capacity": 3150,
"N_TCmax": 1932,
"N_TTmax": 63,
"N_TCavg": 1340.71,
"N_TLmax": 39.795,
"N_TLavg": 28.32,
"N_Num": 2,
"Child": [
{
"N_Id": 2726,
"V_Generatrix": "阴极涂布1",
"V_MainLoad": "阴极涂布",
"N_RatedCurrent": 4000,
"N_GCmax": 41.325,
"N_GTmax": 42.92,
"N_GCavg": 26.58,
"N_GLmax": 1873,
"N_GLavg": 1098.86
},
{
"N_Id": 2727,
"V_Generatrix": "阴极冷压1",
"V_MainLoad": "阴极冷压",
"N_RatedCurrent": 1250,
"N_GCmax": 18.32,
"N_GTmax": 31.53,
"N_GCavg": 10.03,
"N_GLmax": 249,
"N_GLavg": 137.03
}
]
},
{
"N_Id": 1033,
"V_Code": "8TR_02",
"V_Transformer": "变压器8TR02",
"N_Capacity": 3150,
"N_TCmax": 2679,
"N_TTmax": 84.1,
"N_TCavg": 2209.01,
"N_TLmax": 56.041,
"N_TLavg": 46.51,
"N_Num": 2,
"Child": [
{
"N_Id": 2728,
"V_Generatrix": "阴极涂布2",
"V_MainLoad": "阴极涂布",
"N_RatedCurrent": 4000,
"N_GCmax": 42.6,
"N_GTmax": 37.41,
"N_GCavg": 27.68,
"N_GLmax": 432,
"N_GLavg": 280.4
},
{
"N_Id": 2729,
"V_Generatrix": "阴极冷压2",
"V_MainLoad": "阴极冷压",
"N_RatedCurrent": 1000,
"N_GCmax": 44.525,
"N_GTmax": 50.77,
"N_GCavg": 34.85,
"N_GLmax": 1875,
"N_GLavg": 1444.37
}
]
}
]
},
{
"V_Room": "9#配电房",
"N_Num": 5,
"Child": [
{
"N_Id": 1102,
"V_Code": "9TR_01",
"V_Transformer": "变压器9TR01",
"N_Capacity": 3150,
"N_TCmax": 1356,
"N_TTmax": 43.1,
"N_TCavg": 800.37,
"N_TLmax": 44.2,
"N_TLavg": 27.26,
"N_Num": 2,
"Child": [
{
"N_Id": 2730,
"V_Generatrix": "阳极搅拌凹版母线1",
"V_MainLoad": "阳极搅拌凹版母线",
"N_RatedCurrent": 2000,
"N_GCmax": 28.25,
"N_GTmax": 49.65,
"N_GCavg": 13,
"N_GLmax": 906,
"N_GLavg": 304.81
},
{
"N_Id": 2731,
"V_Generatrix": "阳极搅拌凹版母线2",
"V_MainLoad": "阳极搅拌凹版母线",
"N_RatedCurrent": 2000,
"N_GCmax": 40.4,
"N_GTmax": 49.88,
"N_GCavg": 21.85,
"N_GLmax": 808,
"N_GLavg": 418.26
}
]
},
{
"N_Id": 1140,
"V_Code": "9TR_02",
"V_Transformer": "变压器9TR02",
"N_Capacity": 3150,
"N_TCmax": 1069,
"N_TTmax": 41.5,
"N_TCavg": 582.13,
"N_TLmax": 35.354,
"N_TLavg": 19.62,
"N_Num": 3,
"Child": [
{
"N_Id": 2732,
"V_Generatrix": "阳极搅拌凹版母线3",
"V_MainLoad": "阳极搅拌凹版母线",
"N_RatedCurrent": 2000,
"N_GCmax": 10.425,
"N_GTmax": 46.12,
"N_GCavg": 4.36,
"N_GLmax": 417,
"N_GLavg": 169.17
},
{
"N_Id": 2733,
"V_Generatrix": "阳极搅拌凹版母线4",
"V_MainLoad": "阳极搅拌凹版母线",
"N_RatedCurrent": 2000,
"N_GCmax": 30.5,
"N_GTmax": 46.28,
"N_GCavg": 11.78,
"N_GLmax": 610,
"N_GLavg": 226.73
},
{
"N_Id": 2734,
"V_Generatrix": "原料仓三",
"V_MainLoad": "原料仓三",
"N_RatedCurrent": 1600,
"N_GCmax": 14.188,
"N_GTmax": 39.81,
"N_GCavg": 9.49,
"N_GLmax": 227,
"N_GLavg": 144.07
}
]
}
]
},
{
"V_Room": "10#配电房",
"N_Num": 8,
"Child": [
{
"N_Id": 1202,
"V_Code": "10TR_01",
"V_Transformer": "变压器10TR01",
"N_Capacity": 3150,
"N_TCmax": 1442,
"N_TTmax": 61.5,
"N_TCavg": 1185.55,
"N_TLmax": 31.329,
"N_TLavg": 25.69,
"N_Num": 2,
"Child": [
{
"N_Id": 2735,
"V_Generatrix": "阳极涂布母线2",
"V_MainLoad": "阳极涂布-烘箱",
"N_RatedCurrent": 4000,
"N_GCmax": 24.275,
"N_GTmax": 47.67,
"N_GCavg": 20.33,
"N_GLmax": 1004,
"N_GLavg": 829.29
},
{
"N_Id": 2736,
"V_Generatrix": "阳极冷压母线1",
"V_MainLoad": "阳极冷压",
"N_RatedCurrent": 2000,
"N_GCmax": 13.6,
"N_GTmax": 41.05,
"N_GCavg": 8.18,
"N_GLmax": 294,
"N_GLavg": 168.74
}
]
},
{
"N_Id": 1240,
"V_Code": "10TR_02",
"V_Transformer": "变压器10TR02",
"N_Capacity": 3150,
"N_TCmax": 1935,
"N_TTmax": 62.4,
"N_TCavg": 1486.02,
"N_TLmax": 41.543,
"N_TLavg": 32.23,
"N_Num": 2,
"Child": [
{
"N_Id": 2737,
"V_Generatrix": "阳极涂布母线1",
"V_MainLoad": "阳极涂布-烘箱",
"N_RatedCurrent": 4000,
"N_GCmax": 3.575,
"N_GTmax": 42.94,
"N_GCavg": 2.47,
"N_GLmax": 0,
"N_GLavg": 0
},
{
"N_Id": 2738,
"V_Generatrix": "阳极冷压母线2",
"V_MainLoad": "阳极冷压",
"N_RatedCurrent": 1600,
"N_GCmax": 41.2,
"N_GTmax": 44.08,
"N_GCavg": 31.19,
"N_GLmax": 1653,
"N_GLavg": 1243.54
}
]
},
{
"N_Id": 1262,
"V_Code": "10TR_03",
"V_Transformer": "变压器10TR03",
"N_Capacity": 3150,
"N_TCmax": 2505,
"N_TTmax": 61.5,
"N_TCavg": 2081.01,
"N_TLmax": 53.286,
"N_TLavg": 44.3,
"N_Num": 2,
"Child": [
{
"N_Id": 2739,
"V_Generatrix": "阳极涂布母线6",
"V_MainLoad": "阳极涂布红外加热",
"N_RatedCurrent": 4000,
"N_GCmax": 55.875,
"N_GTmax": 57.06,
"N_GCavg": 46.82,
"N_GLmax": 2235,
"N_GLavg": 1844.65
},
{
"N_Id": 2740,
"V_Generatrix": "阳极涂布母线5",
"V_MainLoad": "阳极涂布红外加热",
"N_RatedCurrent": 4000,
"N_GCmax": 10.45,
"N_GTmax": 37.7,
"N_GCavg": 8.91,
"N_GLmax": 480,
"N_GLavg": 381.05
}
]
},
{
"N_Id": 1284,
"V_Code": "10TR_04",
"V_Transformer": "变压器10TR04",
"N_Capacity": 3150,
"N_TCmax": 1757,
"N_TTmax": 57,
"N_TCavg": 1051.36,
"N_TLmax": 37.833,
"N_TLavg": 22.4,
"N_Num": 2,
"Child": [
{
"N_Id": 2741,
"V_Generatrix": "阳极涂布母线4",
"V_MainLoad": "阳极涂布红外加热",
"N_RatedCurrent": 4000,
"N_GCmax": 0,
"N_GTmax": 36.94,
"N_GCavg": 0,
"N_GLmax": 36.2,
"N_GLavg": 18.16
},
{
"N_Id": 2742,
"V_Generatrix": "阳极涂布母线3",
"V_MainLoad": "阳极涂布红外加热",
"N_RatedCurrent": 4000,
"N_GCmax": 37.9,
"N_GTmax": 43.68,
"N_GCavg": 23.99,
"N_GLmax": 1540,
"N_GLavg": 975.62
}
]
}
]
},
{
"V_Room": "11#配电房",
"N_Num": 5,
"Child": [
{
"N_Id": 1402,
"V_Code": "11TR_01",
"V_Transformer": "变压器11TR01",
"N_Capacity": 4000,
"N_TCmax": 1565,
"N_TTmax": 45.2,
"N_TCavg": 1334.21,
"N_TLmax": 25.65,
"N_TLavg": 22.48,
"N_Num": 2,
"Child": [
{
"N_Id": 2743,
"V_Generatrix": "B2",
"V_MainLoad": "Baking-21L",
"N_RatedCurrent": 3200,
"N_GCmax": 16.562,
"N_GTmax": 32.54,
"N_GCavg": 12.26,
"N_GLmax": 530,
"N_GLavg": 373.73
},
{
"N_Id": 2744,
"V_Generatrix": "B1",
"V_MainLoad": "Baking-22L",
"N_RatedCurrent": 3200,
"N_GCmax": 22.062,
"N_GTmax": 32.01,
"N_GCavg": 18.09,
"N_GLmax": 706,
"N_GLavg": 551.73
}
]
},
{
"N_Id": 1429,
"V_Code": "11TR_02",
"V_Transformer": "变压器11TR02",
"N_Capacity": 4000,
"N_TCmax": 1770,
"N_TTmax": 48.2,
"N_TCavg": 1365.72,
"N_TLmax": 29.3,
"N_TLavg": 22.94,
"N_Num": 1,
"Child": [
{
"N_Id": 0,
"V_Generatrix": "",
"V_MainLoad": "",
"N_RatedCurrent": 0,
"N_GCmax": 0,
"N_GTmax": 0,
"N_GCavg": 0,
"N_GLmax": 0,
"N_GLavg": 0
}
]
},
{
"N_Id": 1454,
"V_Code": "11TR_03",
"V_Transformer": "变压器11TR03",
"N_Capacity": 3150,
"N_TCmax": 1480,
"N_TTmax": 0,
"N_TCavg": 1273.65,
"N_TLmax": 29.333,
"N_TLavg": 27.56,
"N_Num": 1,
"Child": [
{
"N_Id": 0,
"V_Generatrix": "",
"V_MainLoad": "",
"N_RatedCurrent": 0,
"N_GCmax": 0,
"N_GTmax": 0,
"N_GCavg": 0,
"N_GLmax": 0,
"N_GLavg": 0
}
]
},
{
"N_Id": 1480,
"V_Code": "11TR_04",
"V_Transformer": "变压器11TR04",
"N_Capacity": 3150,
"N_TCmax": 1632,
"N_TTmax": 51.5,
"N_TCavg": 1370.4,
"N_TLmax": 33.873,
"N_TLavg": 29.61,
"N_Num": 1,
"Child": [
{
"N_Id": 0,
"V_Generatrix": "",
"V_MainLoad": "",
"N_RatedCurrent": 0,
"N_GCmax": 0,
"N_GTmax": 0,
"N_GCavg": 0,
"N_GLmax": 0,
"N_GLavg": 0
}
]
}
]
},
{
"V_Room": "设施4#配电房",
"N_Num": 4,
"Child": [
{
"N_Id": 1602,
"V_Code": "SSF4_BYQ01",
"V_Transformer": "变压器SSF4TR01",
"N_Capacity": 2000,
"N_TCmax": 1250,
"N_TTmax": 58.7,
"N_TCavg": 971.56,
"N_TLmax": 38.418,
"N_TLavg": 32.12,
"N_Num": 1,
"Child": [
{
"N_Id": 0,
"V_Generatrix": "",
"V_MainLoad": "",
"N_RatedCurrent": 0,
"N_GCmax": 0,
"N_GTmax": 0,
"N_GCavg": 0,
"N_GLmax": 0,
"N_GLavg": 0
}
]
},
{
"N_Id": 1638,
"V_Code": "SSF4_BYQ02",
"V_Transformer": "变压器SSF4TR02",
"N_Capacity": 2000,
"N_TCmax": 1155,
"N_TTmax": 48.8,
"N_TCavg": 456.13,
"N_TLmax": 34.6,
"N_TLavg": 14.81,
"N_Num": 1,
"Child": [
{
"N_Id": 0,
"V_Generatrix": "",
"V_MainLoad": "",
"N_RatedCurrent": 0,
"N_GCmax": 0,
"N_GTmax": 0,
"N_GCavg": 0,
"N_GLmax": 0,
"N_GLavg": 0
}
]
},
{
"N_Id": 1670,
"V_Code": "SSF4_BYQ03",
"V_Transformer": "变压器SSF4TR03",
"N_Capacity": 3150,
"N_TCmax": 651,
"N_TTmax": 45.8,
"N_TCavg": 519.93,
"N_TLmax": 13.841,
"N_TLavg": 11.36,
"N_Num": 1,
"Child": [
{
"N_Id": 0,
"V_Generatrix": "",
"V_MainLoad": "",
"N_RatedCurrent": 0,
"N_GCmax": 0,
"N_GTmax": 0,
"N_GCavg": 0,
"N_GLmax": 0,
"N_GLavg": 0
}
]
},
{
"N_Id": 1701,
"V_Code": "SSF4_BYQ04",
"V_Transformer": "变压器SSF4TR04",
"N_Capacity": 3150,
"N_TCmax": 535,
"N_TTmax": 45.2,
"N_TCavg": 488.14,
"N_TLmax": 11.111,
"N_TLavg": 10.47,
"N_Num": 1,
"Child": [
{
"N_Id": 0,
"V_Generatrix": "",
"V_MainLoad": "",
"N_RatedCurrent": 0,
"N_GCmax": 0,
"N_GTmax": 0,
"N_GCavg": 0,
"N_GLmax": 0,
"N_GLavg": 0
}
]
}
]
},
{
"V_Room": "成品仓配电房",
"N_Num": 2,
"Child": [
{
"N_Id": 2564,
"V_Code": "CPCTR_01",
"V_Transformer": "变压器CPCTR_01",
"N_Capacity": 2000,
"N_TCmax": 195,
"N_TTmax": 43.7,
"N_TCavg": 110.78,
"N_TLmax": 5.99,
"N_TLavg": 3.66,
"N_Num": 1,
"Child": [
{
"N_Id": 0,
"V_Generatrix": "",
"V_MainLoad": "",
"N_RatedCurrent": 0,
"N_GCmax": 0,
"N_GTmax": 0,
"N_GCavg": 0,
"N_GLmax": 0,
"N_GLavg": 0
}
]
},
{
"N_Id": 2565,
"V_Code": "CPCTR_02",
"V_Transformer": "变压器CPCTR_02",
"N_Capacity": 2000,
"N_TCmax": 236,
"N_TTmax": 44.1,
"N_TCavg": 166.87,
"N_TLmax": 7.398,
"N_TLavg": 5.81,
"N_Num": 1,
"Child": [
{
"N_Id": 0,
"V_Generatrix": "",
"V_MainLoad": "",
"N_RatedCurrent": 0,
"N_GCmax": 0,
"N_GTmax": 0,
"N_GCavg": 0,
"N_GLmax": 0,
"N_GLavg": 0
}
]
}
]
}
],
}二、table标题
data():{
return {
titleList:['配电房','变压器名称','变压器容量（kVA）','最大电流（A）','最高温度（℃）',
'平均电流（A）', '最大负载率（%）','平均负载率（%）','母线槽回路名称',
'主要负载', '母线槽额定电流（A）','最大电流（A）','最高温度（℃）','平均电流（A）','最大负载率（%）',
'平均负载率（%）'
],
tableData: [],//表格数据
tableMergeData:[],//用来记录合并规则数组
}
} 三、el-table合并span-method
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 假设 this.tableMergeData 是你的合并规则数组
// 遍历规则数组，找到当前单元格是否在某个合并区域内
for (let i = 0; i < this.tableMergeData.length; i++) {
const { s, e, c } = this.tableMergeData[i];
// 如果当前列索引和规则中的列索引相同，且行索引在合并区域内
if (columnIndex === c && rowIndex >= s && rowIndex <= e) {
// 判断是否是第一行（跨行的起始行），如果是，则返回合并的行数和1（因为列不合并）
if (rowIndex === s) {
return {
rowspan: e - s + 1, // 合并的行数
colspan: 1 // 列不合并，始终为1
};
}
// 如果不是第一行，则隐藏该单元格（通过返回0的rowspan和colspan）
else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
// 如果不在任何合并区域内，则返回默认的1行1列
return {
rowspan: 1,
colspan: 1
};
},四、处理树形数据：组合成表格数据格式和处理合并的规则
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 假设 this.tableMergeData 是你的合并规则数组
// 遍历规则数组，找到当前单元格是否在某个合并区域内
for (let i = 0; i < this.tableMergeData.length; i++) {
const { s, e, c } = this.tableMergeData[i];
// 如果当前列索引和规则中的列索引相同，且行索引在合并区域内
if (columnIndex === c && rowIndex >= s && rowIndex <= e) {
// 判断是否是第一行（跨行的起始行），如果是，则返回合并的行数和1（因为列不合并）
if (rowIndex === s) {
return {
rowspan: e - s + 1, // 合并的行数
colspan: 1 // 列不合并，始终为1
};
}
// 如果不是第一行，则隐藏该单元格（通过返回0的rowspan和colspan）
else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
// 如果不在任何合并区域内，则返回默认的1行1列
return {
rowspan: 1,
colspan: 1
};
},四：处理数据：展示表格数据和表格的合并规则数据
mounted() {
this.ces()
},
methods:{
ces(){
//定义一个存表格数据的数组
let treeTables = []
//此处json省略部分 树形数据太长了~~~
let TestJSON = {
"data": [
{
"V_Room": "1#配电房",
"N_Num": 2,
"Child": [
{
"N_Id": 102,
"V_Code": "1TR_01",
"V_Transformer": "变压器1TR01",
"N_Capacity": 2500,
"N_TCmax": 606,
"N_TTmax": 34.5,
"N_TCavg": 385.01,
"N_TLmax": 15.72,
"N_TLavg": 10.38,
"N_Num": 1,
"Child": [
{
"N_Id": 2700,
"V_Generatrix": "阴极备料母线2",
"V_MainLoad": "阴极模切2",
"N_RatedCurrent": 1000,
"N_GCmax": 23.7,
"N_GTmax": 33.38,
"N_GCavg": 19.92,
"N_GLmax": 237,
"N_GLavg": 154.03
}
]
},
{
"N_Id": 143,
"V_Code": "1TR_02",
"V_Transformer": "变压器1TR02",
"N_Capacity": 2500,
"N_TCmax": 848,
"N_TTmax": 40,
"N_TCavg": 727.57,
"N_TLmax": 21.576,
"N_TLavg": 19.72,
"N_Num": 1,
"Child": [
{
"N_Id": 2701,
"V_Generatrix": "阴极模切母线",
"V_MainLoad": "阴极模切1",
"N_RatedCurrent": 3200,
"N_GCmax": 17.375,
"N_GTmax": 32.19,
"N_GCavg": 16.13,
"N_GLmax": 556,
"N_GLavg": 491.05
}
]
}
]
},
],
"totalCount": 0,
"Type": 1,
"Token": null
}
let treeD = TestJSON .data
let MergesListData = [];//存合并单元格数据
let MergesData = [];//存合并单元格数据
let FirstRow = 2
let SecondRow = 2
let FirstRow2 = 0
let SecondRow2 = 0
for (let i = 0; i < treeD.length; i++) { // 第一层循环，遍历树的根节点
let currentNode = treeD[i];
//MergesData中的s是开始行； e是结束行； c是列，从0开始
MergesData.push({s:FirstRow2, e:FirstRow2 + currentNode.N_Num - 1 , c: 0},)
FirstRow = FirstRow + currentNode.N_Num
FirstRow2 = FirstRow2 + currentNode.N_Num
for (let j = 0; j < currentNode.Child.length; j++) { // 第二层循环，遍历当前节点的子节点
let childNode = currentNode.Child[j];
//MergesData中的s是开始行； e是到合并的结束行； c是列，从0开始 ，此处我只需要合并从第一列（c对应0）到第七列（c对应7），可自行扩展优化；
MergesData.push(
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 1},
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 2},
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 3},
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 4},
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 5},
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 6},
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 7},
)
SecondRow = SecondRow + childNode.N_Num
SecondRow2 = SecondRow2 + childNode.N_Num
for (let k = 0; k < childNode.Child.length; k++) {
// 第三层循环，遍历子节点的子节点（最深层的节点）
let deepestNode = childNode.Child[k];
//组装表格数据
treeTables.push({
key1:currentNode.V_Room,
key2:childNode.V_Transformer,
key3:childNode.N_Capacity,
key4:childNode.N_TCmax,
key5:childNode.N_TTmax,
key6:childNode.N_TCavg,
key7:childNode.N_TLmax,
key8:childNode.N_TLavg,
key9:deepestNode.V_Generatrix,
key10:deepestNode.V_MainLoad,
key11:deepestNode.N_RatedCurrent,
key12:deepestNode.N_GCmax,
key13:deepestNode.N_GTmax,
key14:deepestNode.N_GCavg,
key15:deepestNode.N_GLmax,
key16:deepestNode.N_GLavg,
V_Code:childNode.V_Code,//相当于唯一主键
})
}
}
}
// console.log(treeTables)
console.log(MergesData,MergesListData)
this.tableMergeData = MergesData
this.tableData = treeTables
},
}五、表格代码
<el-table
:span-method="objectSpanMethod"
highlight-current-row :data="tableData" border height="100%">
<el-table-column :show-overflow-tooltip="true" v-for="(i,key) in titleList" :key="key" min-width="60" :label="''+i" :prop="'key'+(key+1)" align="center" />
</el-table>六、完整代码贴一下
<template>
<el-table
:span-method="objectSpanMethod"
highlight-current-row :data="tableData" border height="100%">
<el-table-column :show-overflow-tooltip="true" v-for="(i,key) in titleList" :key="key" min-width="60" :label="''+i" :prop="'key'+(key+1)" align="center" />
</el-table>
</template>
<script>
export default {
data() {
return {
titleList:['配电房','变压器名称','变压器容量（kVA）','最大电流（A）','最高温度（℃）',
'平均电流（A）', '最大负载率（%）','平均负载率（%）','母线槽回路名称',
'主要负载', '母线槽额定电流（A）','最大电流（A）','最高温度（℃）','平均电流（A）','最大负载率（%）',
'平均负载率（%）'
],
tableData: [],
tableMergeData:[],
}
},
mounted() {
this.ces()
},
methods:{
ces(){
//定义一个存表格数据的数组
let treeTables = []
//此处json省略部分 树形数据太长了~~~
let TestJSON = {
"data": [
{
"V_Room": "1#配电房",
"N_Num": 2,
"Child": [
{
"N_Id": 102,
"V_Code": "1TR_01",
"V_Transformer": "变压器1TR01",
"N_Capacity": 2500,
"N_TCmax": 606,
"N_TTmax": 34.5,
"N_TCavg": 385.01,
"N_TLmax": 15.72,
"N_TLavg": 10.38,
"N_Num": 1,
"Child": [
{
"N_Id": 2700,
"V_Generatrix": "阴极备料母线2",
"V_MainLoad": "阴极模切2",
"N_RatedCurrent": 1000,
"N_GCmax": 23.7,
"N_GTmax": 33.38,
"N_GCavg": 19.92,
"N_GLmax": 237,
"N_GLavg": 154.03
}
]
},
{
"N_Id": 143,
"V_Code": "1TR_02",
"V_Transformer": "变压器1TR02",
"N_Capacity": 2500,
"N_TCmax": 848,
"N_TTmax": 40,
"N_TCavg": 727.57,
"N_TLmax": 21.576,
"N_TLavg": 19.72,
"N_Num": 1,
"Child": [
{
"N_Id": 2701,
"V_Generatrix": "阴极模切母线",
"V_MainLoad": "阴极模切1",
"N_RatedCurrent": 3200,
"N_GCmax": 17.375,
"N_GTmax": 32.19,
"N_GCavg": 16.13,
"N_GLmax": 556,
"N_GLavg": 491.05
}
]
}
]
},
],
}
let treeD = TestJSON .data
let MergesListData = [];//存合并单元格数据
let MergesData = [];//存合并单元格数据
let FirstRow = 2
let SecondRow = 2
let FirstRow2 = 0
let SecondRow2 = 0
for (let i = 0; i < treeD.length; i++) { // 第一层循环，遍历树的根节点
let currentNode = treeD[i];
//MergesData中的s是开始行； e是结束行； c是列，从0开始
MergesData.push({s:FirstRow2, e:FirstRow2 + currentNode.N_Num - 1 , c: 0},)
FirstRow = FirstRow + currentNode.N_Num
FirstRow2 = FirstRow2 + currentNode.N_Num
for (let j = 0; j < currentNode.Child.length; j++) { // 第二层循环，遍历当前节点的子节点
let childNode = currentNode.Child[j];
//MergesData中的s是开始行； e是到合并的结束行； c是列，从0开始 ，此处我只需要合并从第一列（c对应0）到第七列（c对应7），可自行扩展优化；
MergesData.push(
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 1},
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 2},
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 3},
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 4},
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 5},
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 6},
{s:SecondRow2, e:SecondRow2 + childNode.N_Num - 1 , c: 7},
)
SecondRow = SecondRow + childNode.N_Num
SecondRow2 = SecondRow2 + childNode.N_Num
for (let k = 0; k < childNode.Child.length; k++) {
// 第三层循环，遍历子节点的子节点（最深层的节点）
let deepestNode = childNode.Child[k];
//组装表格数据
treeTables.push({
key1:currentNode.V_Room,
key2:childNode.V_Transformer,
key3:childNode.N_Capacity,
key4:childNode.N_TCmax,
key5:childNode.N_TTmax,
key6:childNode.N_TCavg,
key7:childNode.N_TLmax,
key8:childNode.N_TLavg,
key9:deepestNode.V_Generatrix,
key10:deepestNode.V_MainLoad,
key11:deepestNode.N_RatedCurrent,
key12:deepestNode.N_GCmax,
key13:deepestNode.N_GTmax,
key14:deepestNode.N_GCavg,
key15:deepestNode.N_GLmax,
key16:deepestNode.N_GLavg,
V_Code:childNode.V_Code,//相当于唯一主键
})
}
}
}
// console.log(treeTables)
console.log(MergesData,MergesListData)
this.tableMergeData = MergesData
this.tableData = treeTables
},
}
}
</script>希望能帮助到您！有用的话点个三连（点赞，收藏，关注）吧！！！
1023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
