后台请求到的数据如何在前端动态生成table的列名和相对应的值并合计_后端接口返回数据集,前端页面动态拼接生成table-优快云博客

本文链接：https://blog.youkuaiyun.com/TheFlyPenguin/article/details/121920210

本文介绍如何从后台获取数据后，在前端动态创建表格的列名和对应值。数据格式为嵌套列表，包含`Specifications`（规格）和`Consumption`（消耗量）。通过遍历数据，动态生成`thead`的列头和`tbody`的值。最终实现了在前端展示动态列的表格效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据格式：
[{“ID”:“00000000-0000-0000-0000-000000000000”,“ProductionLineName”:“2站东线”,“ProductCate”:“润泵砂浆”,“ActualOutput”:2,“AddTime”:“0001-01-01 00:00:00”,“Detil”:[{“ProductionRecordID”:“00000000-0000-0000-0000-000000000000”,“Specifications”:“粉煤灰[沧州华润粉煤灰]”,“Consumption”:299.2},{“ProductionRecordID”:“00000000-0000-0000-0000-000000000000”,“Specifications”:“减水剂[/]”,“Consumption”:5.98},{“ProductionRecordID”:“00000000-0000-0000-0000-000000000000”,“Specifications”:“矿粉[超细粉]”,“Consumption”:200.3},{“ProductionRecordID”:“00000000-0000-0000-0000-000000000000”,“Specifications”:“清水[/]”,“Consumption”:263.1},{“ProductionRecordID”:“00000000-0000-0000-0000-000000000000”,“Specifications”:“砂[尾矿砂]”,“Consumption”:2985},{“ProductionRecordID”:“00000000-0000-0000-0000-000000000000”,“Specifications”:“水泥[天旺水泥42.5]”,“Consumption”:238}]},{“ID”:“00000000-0000-0000-0000-000000000000”,“ProductionLineName”:“2站东线”,“ProductCate”:“C20二级配防冻”,“ActualOutput”:79,“AddTime”:“0001-01-01 00:00:00”,“Detil”:[{“Producti