后端返回这样的数据，请问怎么处理才能渲染出表格（其中存在跨行跨列）？
{
"pages": [
{ "pics": [
{
"word": "表5.1.3机械式机动车库停放车辆的外廓尺寸及重量",
"tables": [
{
"cols": 3,
"rows": 7,
"units": [
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 7,
"content": "≤1850"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 7,
"content": "≤5.0×1.85×2.05"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 1,
"row": 7,
"content": "K型车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 6,
"content": "≤2550"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 6,
"content": "≤5.6×2.05×1.55"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 1,
"row": 6,
"content": "C型车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 5,
"content": "≤5.3×1.90×1.55"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 1,
"row": 5,
"content": "T型车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 5,
"content": "≤2350"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 1,
"row": 4,
"content": "D型车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 4,
"content": "≤1700"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 4,
"content": "≤5.0×1.85×1.55"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 3,
"content": "≤1500"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 3,
"content": "≤4.7×1.8×1.45"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 1,
"row": 3,
"content": "Z型车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 2,
"content": "≤1300"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 2,
"content": "≤4.4×1.75×1.45"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 1,
"row": 2,
"content": "X型车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 1,
"content": "重量 (kg)"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 1,
"row": 1,
"content": "组别代号"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 1,
"content": "机动车长×车宽×车高 (m×m×m)"
}
]
}
],
"fileName": "单表.jpg",
"body": null
}
]
},
{
"pics": [
{
"word": "表4.1.1机动车设计车型的外廓尺寸 表4.2.10-1坡道最小净宽",
"tables": [
{
"cols": 3,
"rows": 6,
"units": [
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 6,
"content": "10.0"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 6,
"content": "7.0"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 1,
"row": 6,
"content": "曲线双行"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 5,
"content": "5.0"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 5,
"content": "3.8"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 1,
"row": 5,
"content": "曲线单行"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 4,
"content": "7.0"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 4,
"content": "5.5"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 1,
"row": 4,
"content": "直线双行"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 3,
"content": "3.0"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 3,
"content": "3.5"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 1,
"row": 3,
"content": "直线单行"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 2,
"content": "轻型、中型、大型车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 2,
"content": "微型、小型车"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 1,
"row": 1,
"content": "形式"
},
{
"colSpan": 2,
"rowspan": 1,
"col": 2,
"row": 1,
"content": "最小净宽（m)"
}
]
},
{
"cols": 5,
"rows": 9,
"units": [
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 9,
"content": "4.00"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 9,
"content": "2.50"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 9,
"content": "11.50"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 9,
"content": "货车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 8,
"content": "2.50"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 8,
"content": "12.00"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 8,
"content": "客车"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 1,
"row": 8,
"content": "大型车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 8,
"content": "3.50"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 7,
"content": "4.00"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 7,
"content": "2.50"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 7,
"content": "9.00"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 7,
"content": "货车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 6,
"content": "客车"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 1,
"row": 6,
"content": "中型车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 6,
"content": "9.00"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 6,
"content": "3.20"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 6,
"content": "2.50"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 5,
"content": "2.75"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 5,
"content": "2.25"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 5,
"content": "7.00"
},
{
"colSpan": 2,
"rowspan": 1,
"col": 1,
"row": 5,
"content": "轻型车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 4,
"content": "2.00"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 4,
"content": "1.80"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 4,
"content": "4.80"
},
{
"colSpan": 2,
"rowspan": 1,
"col": 1,
"row": 4,
"content": "小型车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 3,
"content": "1.80"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 3,
"content": "1.60"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 3,
"content": "3.80"
},
{
"colSpan": 2,
"rowspan": 1,
"col": 1,
"row": 3,
"content": "微型车"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 2,
"content": "总高"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 2,
"content": "总宽"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 2,
"content": "总长"
},
{
"colSpan": 2,
"rowspan": 2,
"col": 1,
"row": 1,
"content": "尺寸 设计车型"
},
{
"colSpan": 3,
"rowspan": 1,
"col": 3,
"row": 1,
"content": "外廓尺寸（m)"
}
]
}
],
"fileName": "竖表.jpg",
"body": null
}
]
},
{
"pics": [
{
"word": "表4.2.1室内、外配电装置的最小电气安全净距（mm)",
"tables": [
{
"cols": 9,
"rows": 8,
"units": [
{
"colSpan": 1,
"rowspan": 1,
"col": 1,
"row": 8,
"content": "高低压引出线 的套管至 户外通道地面"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 8,
"content": "室外"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 6,
"row": 8,
"content": "4000"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 8,
"content": "4000"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 8,
"content": "4000"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 8,
"content": "3650"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 9,
"row": 8,
"content": null
},
{
"colSpan": 1,
"rowspan": 1,
"col": 8,
"row": 8,
"content": "4000"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 7,
"row": 8,
"content": "4000"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 7,
"content": "室外"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 8,
"row": 7,
"content": "1050"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 7,
"row": 7,
"content": "1050"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 6,
"row": 7,
"content": "950"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 7,
"content": "950"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 7,
"content": "950"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 7,
"content": "825"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 9,
"row": 6,
"content": "C"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 1,
"row": 6,
"content": "裸带电部分至用 钥匙或工具才能 打开或拆卸的 栅栏"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 8,
"row": 6,
"content": "930"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 7,
"row": 6,
"content": "900"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 6,
"row": 6,
"content": "875"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 6,
"content": "850"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 6,
"content": "825"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 6,
"content": "800"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 6,
"content": "室内"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 1,
"row": 5,
"content": "裸带电部分至 无孔固定遮拦"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 9,
"row": 5,
"content": null
},
{
"colSpan": 1,
"rowspan": 1,
"col": 8,
"row": 5,
"content": null
},
{
"colSpan": 1,
"rowspan": 1,
"col": 7,
"row": 5,
"content": null
},
{
"colSpan": 1,
"rowspan": 1,
"col": 6,
"row": 5,
"content": "155"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 5,
"content": "130"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 5,
"content": "105"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 5,
"content": "50"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 5,
"content": "室内"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 8,
"row": 4,
"content": "2300"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 7,
"row": 4,
"content": "2300"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 6,
"row": 4,
"content": "2200"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 4,
"content": "2200"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 4,
"content": "2200"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 4,
"content": "2000"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 4,
"content": "室外"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 9,
"row": 3,
"content": null
},
{
"colSpan": 1,
"rowspan": 2,
"col": 1,
"row": 3,
"content": "不同时停电检修 的无遮拦裸导体 之间的水平距离"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 8,
"row": 3,
"content": "1980"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 7,
"row": 3,
"content": "1950"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 6,
"row": 3,
"content": "1925"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 3,
"content": "1900"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 3,
"content": "1875"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 3,
"content": "1875"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 3,
"content": "室内"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 8,
"row": 2,
"content": "400"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 7,
"row": 2,
"content": "400"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 6,
"row": 2,
"content": "300"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 2,
"content": "300"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 2,
"content": "300"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 2,
"content": "175"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 2,
"content": "室外"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 1,
"row": 1,
"content": "距地面2500mm以 下的遮拦防护等级 为IP2X时，裸带电 部分与遮护物间 水平净距"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 9,
"row": 1,
"content": "B"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 1,
"content": "室内"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 8,
"row": 1,
"content": "280"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 7,
"row": 1,
"content": "250"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 6,
"row": 1,
"content": "225"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 1,
"content": "200"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 1,
"content": "175"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 1,
"content": "100"
}
]
},
{
"cols": 9,
"rows": 6,
"units": [
{
"colSpan": 1,
"rowspan": 1,
"col": 8,
"row": 6,
"content": "300"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 7,
"row": 6,
"content": "300"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 6,
"row": 6,
"content": "200"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 6,
"content": "200"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 6,
"content": "200"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 6,
"content": "75"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 6,
"content": "室外"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 1,
"row": 5,
"content": "裸带电部分至接地 部分和不同的裸带 电部分之间"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 9,
"row": 5,
"content": "A"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 8,
"row": 5,
"content": "180"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 7,
"row": 5,
"content": "150"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 6,
"row": 5,
"content": "125"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 5,
"content": "100"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 5,
"content": "75"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 5,
"content": "20"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 5,
"content": "室内"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 8,
"row": 4,
"content": "2800"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 7,
"row": 4,
"content": "2800"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 6,
"row": 4,
"content": "2700"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 4,
"content": "2700"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 4,
"content": "2700"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 4,
"content": "2500"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 4,
"content": "室外"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 1,
"row": 3,
"content": "无遮拦裸带电部分 至地（楼）面之间"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 9,
"row": 3,
"content": null
},
{
"colSpan": 1,
"rowspan": 1,
"col": 8,
"row": 3,
"content": "2500"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 7,
"row": 3,
"content": "2500"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 6,
"row": 3,
"content": "2500"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 3,
"content": "2500"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 3,
"content": "2500"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 3,
"content": "2500"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 2,
"row": 3,
"content": "室内"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 8,
"row": 2,
"content": "20"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 7,
"row": 2,
"content": "15"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 6,
"row": 2,
"content": "10"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 5,
"row": 2,
"content": "6"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 4,
"row": 2,
"content": "3"
},
{
"colSpan": 1,
"rowspan": 1,
"col": 3,
"row": 2,
"content": null
},
{
"colSpan": 1,
"rowspan": 2,
"col": 1,
"row": 1,
"content": "监控项目"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 9,
"row": 1,
"content": "符号"
},
{
"colSpan": 6,
"rowspan": 1,
"col": 3,
"row": 1,
"content": "额定电压（kV)"
},
{
"colSpan": 1,
"rowspan": 2,
"col": 2,
"row": 1,
"content": "场所"
}
]
}
],
"fileName": "碎片表.jpg",
"body": null
}
]
}
],
"excelToken": "9aea95d5d7274357af1c31d6d4024732"
}
回答：
这个数据如果你想用插件像elementUI什么的你就得提炼一下数据，这个数据3列，然后有7条，
然后你从units里面每三个元素组一个数据（其实就是row一样的提炼为一个数据，然后col是key，content是value）然后从属性就是colspan，rowspan什么的，这个其实就是把原来的数据按每一个cell拆分了
以上是 后端返回这样的数据，请问怎么处理才能渲染出表格（其中存在跨行跨列）？ 的全部内容， 来源链接： utcz.com/p/936541.html
