vue动态渲染表头，已有的固定表头拼接后台返回的表头
固定的几个表头拼接上后台返回的表头，并显示数据
后台返回的数据分为两个数组，第一个是固定表头的数据；第二个数组是动态表头的个数；
结合element或者iview组件实现，要注意的一点是后台返回的数据，reportParams数组只是循环拼接表头的作用，主要问题在于如何与data数组中的factorVal数组进行id比较，比较之后再去显示对应表头的数据；
假数据👇
{"pageCount":1,"code":0,"data":[{"factorVal":[{"flagNo":"N","standardValDisplay":"28.3","scale":2,"standardLimitVal":0.8000000000,"factorNo":"w01001","requestNo":"20210311132607480","factorId":2,"realtimeDataDisplay":"7.15","standardLimitValDisplay":"0.8","unit":"无量纲","factorName":"pH值","flagCNName":"正常","standardVal":28.3000000000,"realtimeData":7.1520000000},{"flagNo":"N","standardValDisplay":"16","scale":2,"standardLimitVal":1.5000000000,"factorNo":"w01014","requestNo":"20210311132607480","factorId":16,"realtimeDataDisplay":"15.6","standardLimitValDisplay":"1.5","unit":"uS/cm","factorName":"电导率","flagCNName":"正常","standardVal":16.0000000000,"realtimeData":15.6000000000},{"flagNo":"N","standardValDisplay":"43.65","scale":2,"standardLimitVal":33.2222000000,"factorNo":"w01003","requestNo":"20210311132607480","factorId":4,"realtimeDataDisplay":"5.43","standardLimitValDisplay":"33.22","unit":"NTU","factorName":"浑浊度","flagCNName":"正常","standardVal":43.6453434000,"realtimeData":5.4270000000},{"flagNo":"N","standardValDisplay":"","scale":1,"standardLimitVal":null,"factorNo":"w01010","requestNo":"20210311132607480","factorId":1,"realtimeDataDisplay":"26.5","standardLimitValDisplay":"","unit":"℃","factorName":"水温","flagCNName":"正常","standardVal":null,"realtimeData":26.5100000000},{"flagNo":"T","standardValDisplay":"3.1","scale":2,"standardLimitVal":0.2000000000,"factorNo":"w01009","requestNo":"20210311132607480","factorId":3,"realtimeDataDisplay":"2.94","standardLimitValDisplay":"0.2","unit":"mg/L","factorName":"溶解氧","flagCNName":"超上限","standardVal":3.1000000000,"realtimeData":2.9440000000}],"siteNo":"SA010000_TCP79","submitTime":"2020-09-14 02:32:00","statusName":"不在线","siteId":7,"siteName":"测试站点","waterGradeName":"","waterGradeId":null,"requestNo":"20210311132607480","status":0}],"err_msg":"","reportParams":[{"factorId":6,"standardValDisplay":"1,230","standardLimitValDisplay":"","unit":"mg/L","factorName":"化学需氧量（COD）","scale":0,"standardLimitVal":null,"standardVal":1230.0981230000,"factorNo":"w01018","paramId":1,"lastUpdateTime":"2021-03-01 05:51:20"},{"factorId":7,"standardValDisplay":"1,230.0981","standardLimitValDisplay":"","unit":"mg/L","factorName":"氨氮","scale":4,"standardLimitVal":null,"standardVal":1230.0981230000,"factorNo":"w21003","paramId":3,"lastUpdateTime":"2021-03-01 05:51:20"},{"factorId":4,"standardValDisplay":"43.65","standardLimitValDisplay":"33.22","unit":"NTU","factorName":"浑浊度","scale":2,"standardLimitVal":33.2222000000,"standardVal":43.6453434000,"factorNo":"w01003","paramId":5,"lastUpdateTime":"2021-03-09 15:26:05"},{"factorId":2,"standardValDisplay":"28.3","standardLimitValDisplay":"0.8","unit":"无量纲","factorName":"pH值","scale":2,"standardLimitVal":0.8000000000,"standardVal":28.3000000000,"factorNo":"w01001","paramId":6,"lastUpdateTime":"2021-03-11 11:06:42"},{"factorId":16,"standardValDisplay":"16","standardLimitValDisplay":"1.5","unit":"uS/cm","factorName":"电导率","scale":2,"standardLimitVal":1.5000000000,"standardVal":16.0000000000,"factorNo":"w01014","paramId":7,"lastUpdateTime":"2021-03-11 11:07:17"},{"factorId":3,"standardValDisplay":"3.1","standardLimitValDisplay":"0.2","unit":"mg/L","factorName":"溶解氧","scale":2,"standardLimitVal":0.2000000000,"standardVal":3.1000000000,"factorNo":"w01009","paramId":8,"lastUpdateTime":"2021-03-11 11:07:58"},{"factorId":9,"standardValDisplay":"0.1","standardLimitValDisplay":"0.01","unit":"mg/L","factorName":"总氮","scale":2,"standardLimitVal":0.0100000000,"standardVal":0.1000000000,"factorNo":"w21001","paramId":9,"lastUpdateTime":"2021-03-11 11:08:32"}],"pageSize":20,"page":1,"totalCount":1,"dataFlags":[{"flagNo":"N","flagCNName":"正常","comment":"","flagId":1},{"flagNo":"T","flagCNName":"超上限","comment":"","flagId":2},{"flagNo":"L","flagCNName":"超下限","comment":"","flagId":3},{"flagNo":"P","flagCNName":"电源故障","comment":"","flagId":4},{"flagNo":"D","flagCNName":"仪器故障","comment":"","flagId":5},{"flagNo":"F","flagCNName":"仪器通信故障","comment":"","flagId":6},{"flagNo":"B","flagCNName":"仪器离线","comment":"","flagId":7},{"flagNo":"Z","flagCNName":"取水点无水样","comment":"","flagId":8},{"flagNo":"S","flagCNName":"手工输入数据","comment":"","flagId":9},{"flagNo":"M","flagCNName":"维护调试数据","comment":"","flagId":10},{"flagNo":"hd","flagCNName":"现场启动测试","comment":"","flagId":11}]}
先上结果图：如下
分析下数据：大概是这个意思
如果事先把固定表头写在界面的话，等获取数据后再渲染动态表头，表头会出现明显变化。显然不满足要求。分析完，我们就来简单实现。
<template>
<el-table :data="tableData">
<el-table-column v-for="item,index in columns" :label="item.label" :key="index">
<template slot-scope="scope">
<div>
{{item.prop?scope.row[item.prop]:showDynamicValue(scope.row,item.label)}}
</div>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: "Test",
data(){
return{
tableData:[],
columns:[],
//固定表头
fixedColumn:[
{label:'站点编码',prop:'siteNo'},
{label:'站点名称',prop:'siteName'},
{label:'状态',prop:'statusName'},
{label:'监测时间',prop:'submitTime'},
{label:'水质类别',prop:'waterGradeName'},
],
}
},
created() {
//返回结果，占篇幅太长，已省略
let res={};
//循环 reportParams 获取动态表头
let dynamicColumn=res.reportParams.map(function (item,index) {
return {label:item.factorName,prop:''};
})
this.tableData=res.data;
this.columns=[...this.fixedColumn,...dynamicColumn];
},
methods:{
showDynamicValue(row,label){
let showLabel='';
row.factorVal.forEach(item=>{
if(item.factorName===label){
showLabel=item.realtimeData
}
});
return showLabel;
}
}
}
</script>
let arr1 = [
{ id: 111, img: '112' },
{ id: 222, img: '221' },
]
let arr2 = [
{ id: 111, val: 333 },
{ id: 222, val: 444 },
]
function mergeArr(arr1, arr2) {
//arr目标数组 arr1要合并的数组 return会合并后的数组
if (arr1.length == 0) {
return []
}
let arr3 = []
arr1.map((item, index) => {
arr3.push(
Object.assign(
item,
arr2.find((f) => (f.id == item.id))
)
)
})
return arr3
}
console.log(mergeArr(arr1, arr2))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<el-table :data="data">
<el-table-column prop="siteNo" label="网站编码(固定表头)"></el-table-column>
<el-table-column prop="submitTime" label="监测时间(固定表头)"></el-table-column>
<el-table-column v-for="obj in reportParams" :prop="obj.factorName" :label="obj.factorName"></el-table-column>
</el-table>
</div>
<script>
var app = new Vue({
el:"#app",
data: {
"pageCount": 1,
"code": 0,
"data": [{
"factorVal": [{
"flagNo": "N",
"standardValDisplay": "28.3",
"scale": 2,
"standardLimitVal": 0.8000000000,
"factorNo": "w01001",
"requestNo": "20210311132607480",
"factorId": 2,
"realtimeDataDisplay": "7.15",
"standardLimitValDisplay": "0.8",
"unit": "无量纲",
"factorName": "pH值",
"flagCNName": "正常",
"standardVal": 28.3000000000,
"realtimeData": 7.1520000000
}, {
"flagNo": "N",
"standardValDisplay": "16",
"scale": 2,
"standardLimitVal": 1.5000000000,
"factorNo": "w01014",
"requestNo": "20210311132607480",
"factorId": 16,
"realtimeDataDisplay": "15.6",
"standardLimitValDisplay": "1.5",
"unit": "uS/cm",
"factorName": "电导率",
"flagCNName": "正常",
"standardVal": 16.0000000000,
"realtimeData": 15.6000000000
}, {
"flagNo": "N",
"standardValDisplay": "43.65",
"scale": 2,
"standardLimitVal": 33.2222000000,
"factorNo": "w01003",
"requestNo": "20210311132607480",
"factorId": 4,
"realtimeDataDisplay": "5.43",
"standardLimitValDisplay": "33.22",
"unit": "NTU",
"factorName": "浑浊度",
"flagCNName": "正常",
"standardVal": 43.6453434000,
"realtimeData": 5.4270000000
}, {
"flagNo": "N",
"standardValDisplay": "",
"scale": 1,
"standardLimitVal": null,
"factorNo": "w01010",
"requestNo": "20210311132607480",
"factorId": 1,
"realtimeDataDisplay": "26.5",
"standardLimitValDisplay": "",
"unit": "℃",
"factorName": "水温",
"flagCNName": "正常",
"standardVal": null,
"realtimeData": 26.5100000000
}, {
"flagNo": "T",
"standardValDisplay": "3.1",
"scale": 2,
"standardLimitVal": 0.2000000000,
"factorNo": "w01009",
"requestNo": "20210311132607480",
"factorId": 3,
"realtimeDataDisplay": "2.94",
"standardLimitValDisplay": "0.2",
"unit": "mg/L",
"factorName": "溶解氧",
"flagCNName": "超上限",
"standardVal": 3.1000000000,
"realtimeData": 2.9440000000
}],
"siteNo": "SA010000_TCP79",
"submitTime": "2020-09-14 02:32:00",
"statusName": "不在线",
"siteId": 7,
"siteName": "测试站点",
"waterGradeName": "",
"waterGradeId": null,
"requestNo": "20210311132607480",
"status": 0
}],
"err_msg": "",
"reportParams": [{
"factorId": 6,
"standardValDisplay": "1,230",
"standardLimitValDisplay": "",
"unit": "mg/L",
"factorName": "化学需氧量（COD）",
"scale": 0,
"standardLimitVal": null,
"standardVal": 1230.0981230000,
"factorNo": "w01018",
"paramId": 1,
"lastUpdateTime": "2021-03-01 05:51:20"
}, {
"factorId": 7,
"standardValDisplay": "1,230.0981",
"standardLimitValDisplay": "",
"unit": "mg/L",
"factorName": "氨氮",
"scale": 4,
"standardLimitVal": null,
"standardVal": 1230.0981230000,
"factorNo": "w21003",
"paramId": 3,
"lastUpdateTime": "2021-03-01 05:51:20"
}, {
"factorId": 4,
"standardValDisplay": "43.65",
"standardLimitValDisplay": "33.22",
"unit": "NTU",
"factorName": "浑浊度",
"scale": 2,
"standardLimitVal": 33.2222000000,
"standardVal": 43.6453434000,
"factorNo": "w01003",
"paramId": 5,
"lastUpdateTime": "2021-03-09 15:26:05"
}, {
"factorId": 2,
"standardValDisplay": "28.3",
"standardLimitValDisplay": "0.8",
"unit": "无量纲",
"factorName": "pH值",
"scale": 2,
"standardLimitVal": 0.8000000000,
"standardVal": 28.3000000000,
"factorNo": "w01001",
"paramId": 6,
"lastUpdateTime": "2021-03-11 11:06:42"
}, {
"factorId": 16,
"standardValDisplay": "16",
"standardLimitValDisplay": "1.5",
"unit": "uS/cm",
"factorName": "电导率",
"scale": 2,
"standardLimitVal": 1.5000000000,
"standardVal": 16.0000000000,
"factorNo": "w01014",
"paramId": 7,
"lastUpdateTime": "2021-03-11 11:07:17"
}, {
"factorId": 3,
"standardValDisplay": "3.1",
"standardLimitValDisplay": "0.2",
"unit": "mg/L",
"factorName": "溶解氧",
"scale": 2,
"standardLimitVal": 0.2000000000,
"standardVal": 3.1000000000,
"factorNo": "w01009",
"paramId": 8,
"lastUpdateTime": "2021-03-11 11:07:58"
}, {
"factorId": 9,
"standardValDisplay": "0.1",
"standardLimitValDisplay": "0.01",
"unit": "mg/L",
"factorName": "总氮",
"scale": 2,
"standardLimitVal": 0.0100000000,
"standardVal": 0.1000000000,
"factorNo": "w21001",
"paramId": 9,
"lastUpdateTime": "2021-03-11 11:08:32"
}],
"pageSize": 20,
"page": 1,
"totalCount": 1,
"dataFlags": [{
"flagNo": "N",
"flagCNName": "正常",
"comment": "",
"flagId": 1
}, {
"flagNo": "T",
"flagCNName": "超上限",
"comment": "",
"flagId": 2
}, {
"flagNo": "L",
"flagCNName": "超下限",
"comment": "",
"flagId": 3
}, {
"flagNo": "P",
"flagCNName": "电源故障",
"comment": "",
"flagId": 4
}, {
"flagNo": "D",
"flagCNName": "仪器故障",
"comment": "",
"flagId": 5
}, {
"flagNo": "F",
"flagCNName": "仪器通信故障",
"comment": "",
"flagId": 6
}, {
"flagNo": "B",
"flagCNName": "仪器离线",
"comment": "",
"flagId": 7
}, {
"flagNo": "Z",
"flagCNName": "取水点无水样",
"comment": "",
"flagId": 8
}, {
"flagNo": "S",
"flagCNName": "手工输入数据",
"comment": "",
"flagId": 9
}, {
"flagNo": "M",
"flagCNName": "维护调试数据",
"comment": "",
"flagId": 10
}, {
"flagNo": "hd",
"flagCNName": "现场启动测试",
"comment": "",
"flagId": 11
}]
},
created: function () {
this.data.forEach(item=>{
var g = {};
item.factorVal.forEach(v=>{
g[v.factorId] = v.standardValDisplay;
});
this.reportParams.forEach(v=>{
item[v.factorName] = v.factorId in g ? g[v.factorId] : "(没有找到对应的factorId)";
});
});
}
});
</script>
</body>
</html>
我看看。。。。。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<th>网站编码(固定表头)</th>
<th>监测时间(固定表头)</th>
<th v-for="obj in reportParams">{{obj.factorName}}</th>
</tr>
<tr v-for="item in data">
<td>{{item.siteNo}}</td>
<td>{{item.submitTime}}</td>
<td v-for="obj in reportParams">{{getValueById(item.factorVal, obj.factorId)}}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el:"#app",
data: {
"pageCount": 1,
"code": 0,
"data": [{
"factorVal": [{
"flagNo": "N",
"standardValDisplay": "28.3",
"scale": 2,
"standardLimitVal": 0.8000000000,
"factorNo": "w01001",
"requestNo": "20210311132607480",
"factorId": 2,
"realtimeDataDisplay": "7.15",
"standardLimitValDisplay": "0.8",
"unit": "无量纲",
"factorName": "pH值",
"flagCNName": "正常",
"standardVal": 28.3000000000,
"realtimeData": 7.1520000000
}, {
"flagNo": "N",
"standardValDisplay": "16",
"scale": 2,
"standardLimitVal": 1.5000000000,
"factorNo": "w01014",
"requestNo": "20210311132607480",
"factorId": 16,
"realtimeDataDisplay": "15.6",
"standardLimitValDisplay": "1.5",
"unit": "uS/cm",
"factorName": "电导率",
"flagCNName": "正常",
"standardVal": 16.0000000000,
"realtimeData": 15.6000000000
}, {
"flagNo": "N",
"standardValDisplay": "43.65",
"scale": 2,
"standardLimitVal": 33.2222000000,
"factorNo": "w01003",
"requestNo": "20210311132607480",
"factorId": 4,
"realtimeDataDisplay": "5.43",
"standardLimitValDisplay": "33.22",
"unit": "NTU",
"factorName": "浑浊度",
"flagCNName": "正常",
"standardVal": 43.6453434000,
"realtimeData": 5.4270000000
}, {
"flagNo": "N",
"standardValDisplay": "",
"scale": 1,
"standardLimitVal": null,
"factorNo": "w01010",
"requestNo": "20210311132607480",
"factorId": 1,
"realtimeDataDisplay": "26.5",
"standardLimitValDisplay": "",
"unit": "℃",
"factorName": "水温",
"flagCNName": "正常",
"standardVal": null,
"realtimeData": 26.5100000000
}, {
"flagNo": "T",
"standardValDisplay": "3.1",
"scale": 2,
"standardLimitVal": 0.2000000000,
"factorNo": "w01009",
"requestNo": "20210311132607480",
"factorId": 3,
"realtimeDataDisplay": "2.94",
"standardLimitValDisplay": "0.2",
"unit": "mg/L",
"factorName": "溶解氧",
"flagCNName": "超上限",
"standardVal": 3.1000000000,
"realtimeData": 2.9440000000
}],
"siteNo": "SA010000_TCP79",
"submitTime": "2020-09-14 02:32:00",
"statusName": "不在线",
"siteId": 7,
"siteName": "测试站点",
"waterGradeName": "",
"waterGradeId": null,
"requestNo": "20210311132607480",
"status": 0
}],
"err_msg": "",
"reportParams": [{
"factorId": 6,
"standardValDisplay": "1,230",
"standardLimitValDisplay": "",
"unit": "mg/L",
"factorName": "化学需氧量（COD）",
"scale": 0,
"standardLimitVal": null,
"standardVal": 1230.0981230000,
"factorNo": "w01018",
"paramId": 1,
"lastUpdateTime": "2021-03-01 05:51:20"
}, {
"factorId": 7,
"standardValDisplay": "1,230.0981",
"standardLimitValDisplay": "",
"unit": "mg/L",
"factorName": "氨氮",
"scale": 4,
"standardLimitVal": null,
"standardVal": 1230.0981230000,
"factorNo": "w21003",
"paramId": 3,
"lastUpdateTime": "2021-03-01 05:51:20"
}, {
"factorId": 4,
"standardValDisplay": "43.65",
"standardLimitValDisplay": "33.22",
"unit": "NTU",
"factorName": "浑浊度",
"scale": 2,
"standardLimitVal": 33.2222000000,
"standardVal": 43.6453434000,
"factorNo": "w01003",
"paramId": 5,
"lastUpdateTime": "2021-03-09 15:26:05"
}, {
"factorId": 2,
"standardValDisplay": "28.3",
"standardLimitValDisplay": "0.8",
"unit": "无量纲",
"factorName": "pH值",
"scale": 2,
"standardLimitVal": 0.8000000000,
"standardVal": 28.3000000000,
"factorNo": "w01001",
"paramId": 6,
"lastUpdateTime": "2021-03-11 11:06:42"
}, {
"factorId": 16,
"standardValDisplay": "16",
"standardLimitValDisplay": "1.5",
"unit": "uS/cm",
"factorName": "电导率",
"scale": 2,
"standardLimitVal": 1.5000000000,
"standardVal": 16.0000000000,
"factorNo": "w01014",
"paramId": 7,
"lastUpdateTime": "2021-03-11 11:07:17"
}, {
"factorId": 3,
"standardValDisplay": "3.1",
"standardLimitValDisplay": "0.2",
"unit": "mg/L",
"factorName": "溶解氧",
"scale": 2,
"standardLimitVal": 0.2000000000,
"standardVal": 3.1000000000,
"factorNo": "w01009",
"paramId": 8,
"lastUpdateTime": "2021-03-11 11:07:58"
}, {
"factorId": 9,
"standardValDisplay": "0.1",
"standardLimitValDisplay": "0.01",
"unit": "mg/L",
"factorName": "总氮",
"scale": 2,
"standardLimitVal": 0.0100000000,
"standardVal": 0.1000000000,
"factorNo": "w21001",
"paramId": 9,
"lastUpdateTime": "2021-03-11 11:08:32"
}],
"pageSize": 20,
"page": 1,
"totalCount": 1,
"dataFlags": [{
"flagNo": "N",
"flagCNName": "正常",
"comment": "",
"flagId": 1
}, {
"flagNo": "T",
"flagCNName": "超上限",
"comment": "",
"flagId": 2
}, {
"flagNo": "L",
"flagCNName": "超下限",
"comment": "",
"flagId": 3
}, {
"flagNo": "P",
"flagCNName": "电源故障",
"comment": "",
"flagId": 4
}, {
"flagNo": "D",
"flagCNName": "仪器故障",
"comment": "",
"flagId": 5
}, {
"flagNo": "F",
"flagCNName": "仪器通信故障",
"comment": "",
"flagId": 6
}, {
"flagNo": "B",
"flagCNName": "仪器离线",
"comment": "",
"flagId": 7
}, {
"flagNo": "Z",
"flagCNName": "取水点无水样",
"comment": "",
"flagId": 8
}, {
"flagNo": "S",
"flagCNName": "手工输入数据",
"comment": "",
"flagId": 9
}, {
"flagNo": "M",
"flagCNName": "维护调试数据",
"comment": "",
"flagId": 10
}, {
"flagNo": "hd",
"flagCNName": "现场启动测试",
"comment": "",
"flagId": 11
}]
},
methods: {
getValueById: function (arr,id) {
for (var i = 0, len = arr.length; i < len; i++) {
if (arr[i].factorId==id) {
console.log(arr[i]);
return arr[i].standardValDisplay;
}
}
return "(没有找到对应的factorId)";
}
}
});
</script>
</body>
</html>
两个id相同的时候把两个数组合并在一起，然后循环查出来所有factorName不重复的当做表头，循环渲染合并后的数组就行了。
结合element或者iview组件实现，要注意的一点是后台返回的数据，reportParams数组只是循环拼接表头的作用，主要问题在于如何与data数组中的factorVal数组进行id比较，比较之后再去显示对应表头的数据
- 固定表头声明好
- function mergeHeader(dynamic) { return newHeader } //获取数据里面的key(只取固定表头之外的） 生成动态表头
- 渲染数据
你看这个数据对吗
[{"factorId":6,"standardValDisplay":"1,230","standardLimitValDisplay":"","unit":"mg/L","factorName":"化学需氧量（COD）","scale":0,"standardLimitVal":null,"standardVal":1230.098123,"factorNo":"w01018","paramId":1,"lastUpdateTime":"2021-03-01 05:51:20"},{"factorId":7,"standardValDisplay":"1,230.0981","standardLimitValDisplay":"","unit":"mg/L","factorName":"氨氮","scale":4,"standardLimitVal":null,"standardVal":1230.098123,"factorNo":"w21003","paramId":3,"lastUpdateTime":"2021-03-01 05:51:20"},{"factorId":4,"standardValDisplay":"43.65","standardLimitValDisplay":"33.22","unit":"NTU","factorName":"浑浊度","scale":2,"standardLimitVal":33.2222,"standardVal":43.6453434,"factorNo":"w01003","paramId":5,"lastUpdateTime":"2021-03-09 15:26:05"},{"factorId":2,"standardValDisplay":"28.3","standardLimitValDisplay":"0.8","unit":"无量纲","factorName":"pH值","scale":2,"standardLimitVal":0.8,"standardVal":28.3,"factorNo":"w01001","paramId":6,"lastUpdateTime":"2021-03-11 11:06:42"},{"factorId":16,"standardValDisplay":"16","standardLimitValDisplay":"1.5","unit":"uS/cm","factorName":"电导率","scale":2,"standardLimitVal":1.5,"standardVal":16,"factorNo":"w01014","paramId":7,"lastUpdateTime":"2021-03-11 11:07:17"},{"factorId":3,"standardValDisplay":"3.1","standardLimitValDisplay":"0.2","unit":"mg/L","factorName":"溶解氧","scale":2,"standardLimitVal":0.2,"standardVal":3.1,"factorNo":"w01009","paramId":8,"lastUpdateTime":"2021-03-11 11:07:58"},{"factorId":9,"standardValDisplay":"0.1","standardLimitValDisplay":"0.01","unit":"mg/L","factorName":"总氮","scale":2,"standardLimitVal":0.01,"standardVal":0.1,"factorNo":"w21001","paramId":9,"lastUpdateTime":"2021-03-11 11:08:32"},{"flagNo":"N","standardValDisplay":"","scale":1,"standardLimitVal":null,"factorNo":"w01010","requestNo":"20210311132607480","factorId":1,"realtimeDataDisplay":"26.5","standardLimitValDisplay":"","unit":"℃","factorName":"水温","flagCNName":"正常","standardVal":null,"realtimeData":26.51}]
动态更新的数据需要用computed计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<el-table :data="tableData">
<el-table-column prop="siteNo" label="网站编码(固定表头)"></el-table-column>
<el-table-column prop="submitTime" label="监测时间(固定表头)"></el-table-column>
<el-table-column v-for="obj in reportParams" :prop="obj.factorName" :label="obj.factorName"></el-table-column>
</el-table>
</div>
<script>
var app = new Vue({
el:"#app",
data: {
"pageCount": 1,
"code": 0,
"data": [{
"factorVal": [{
"flagNo": "N",
"standardValDisplay": "28.3",
"scale": 2,
"standardLimitVal": 0.8000000000,
"factorNo": "w01001",
"requestNo": "20210311132607480",
"factorId": 2,
"realtimeDataDisplay": "7.15",
"standardLimitValDisplay": "0.8",
"unit": "无量纲",
"factorName": "pH值",
"flagCNName": "正常",
"standardVal": 28.3000000000,
"realtimeData": 7.1520000000
}, {
"flagNo": "N",
"standardValDisplay": "16",
"scale": 2,
"standardLimitVal": 1.5000000000,
"factorNo": "w01014",
"requestNo": "20210311132607480",
"factorId": 16,
"realtimeDataDisplay": "15.6",
"standardLimitValDisplay": "1.5",
"unit": "uS/cm",
"factorName": "电导率",
"flagCNName": "正常",
"standardVal": 16.0000000000,
"realtimeData": 15.6000000000
}, {
"flagNo": "N",
"standardValDisplay": "43.65",
"scale": 2,
"standardLimitVal": 33.2222000000,
"factorNo": "w01003",
"requestNo": "20210311132607480",
"factorId": 4,
"realtimeDataDisplay": "5.43",
"standardLimitValDisplay": "33.22",
"unit": "NTU",
"factorName": "浑浊度",
"flagCNName": "正常",
"standardVal": 43.6453434000,
"realtimeData": 5.4270000000
}, {
"flagNo": "N",
"standardValDisplay": "",
"scale": 1,
"standardLimitVal": null,
"factorNo": "w01010",
"requestNo": "20210311132607480",
"factorId": 1,
"realtimeDataDisplay": "26.5",
"standardLimitValDisplay": "",
"unit": "℃",
"factorName": "水温",
"flagCNName": "正常",
"standardVal": null,
"realtimeData": 26.5100000000
}, {
"flagNo": "T",
"standardValDisplay": "3.1",
"scale": 2,
"standardLimitVal": 0.2000000000,
"factorNo": "w01009",
"requestNo": "20210311132607480",
"factorId": 3,
"realtimeDataDisplay": "2.94",
"standardLimitValDisplay": "0.2",
"unit": "mg/L",
"factorName": "溶解氧",
"flagCNName": "超上限",
"standardVal": 3.1000000000,
"realtimeData": 2.9440000000
}],
"siteNo": "SA010000_TCP79",
"submitTime": "2020-09-14 02:32:00",
"statusName": "不在线",
"siteId": 7,
"siteName": "测试站点",
"waterGradeName": "",
"waterGradeId": null,
"requestNo": "20210311132607480",
"status": 0
}],
"err_msg": "",
"reportParams": [{
"factorId": 6,
"standardValDisplay": "1,230",
"standardLimitValDisplay": "",
"unit": "mg/L",
"factorName": "化学需氧量（COD）",
"scale": 0,
"standardLimitVal": null,
"standardVal": 1230.0981230000,
"factorNo": "w01018",
"paramId": 1,
"lastUpdateTime": "2021-03-01 05:51:20"
}, {
"factorId": 7,
"standardValDisplay": "1,230.0981",
"standardLimitValDisplay": "",
"unit": "mg/L",
"factorName": "氨氮",
"scale": 4,
"standardLimitVal": null,
"standardVal": 1230.0981230000,
"factorNo": "w21003",
"paramId": 3,
"lastUpdateTime": "2021-03-01 05:51:20"
}, {
"factorId": 4,
"standardValDisplay": "43.65",
"standardLimitValDisplay": "33.22",
"unit": "NTU",
"factorName": "浑浊度",
"scale": 2,
"standardLimitVal": 33.2222000000,
"standardVal": 43.6453434000,
"factorNo": "w01003",
"paramId": 5,
"lastUpdateTime": "2021-03-09 15:26:05"
}, {
"factorId": 2,
"standardValDisplay": "28.3",
"standardLimitValDisplay": "0.8",
"unit": "无量纲",
"factorName": "pH值",
"scale": 2,
"standardLimitVal": 0.8000000000,
"standardVal": 28.3000000000,
"factorNo": "w01001",
"paramId": 6,
"lastUpdateTime": "2021-03-11 11:06:42"
}, {
"factorId": 16,
"standardValDisplay": "16",
"standardLimitValDisplay": "1.5",
"unit": "uS/cm",
"factorName": "电导率",
"scale": 2,
"standardLimitVal": 1.5000000000,
"standardVal": 16.0000000000,
"factorNo": "w01014",
"paramId": 7,
"lastUpdateTime": "2021-03-11 11:07:17"
}, {
"factorId": 3,
"standardValDisplay": "3.1",
"standardLimitValDisplay": "0.2",
"unit": "mg/L",
"factorName": "溶解氧",
"scale": 2,
"standardLimitVal": 0.2000000000,
"standardVal": 3.1000000000,
"factorNo": "w01009",
"paramId": 8,
"lastUpdateTime": "2021-03-11 11:07:58"
}, {
"factorId": 9,
"standardValDisplay": "0.1",
"standardLimitValDisplay": "0.01",
"unit": "mg/L",
"factorName": "总氮",
"scale": 2,
"standardLimitVal": 0.0100000000,
"standardVal": 0.1000000000,
"factorNo": "w21001",
"paramId": 9,
"lastUpdateTime": "2021-03-11 11:08:32"
}],
"pageSize": 20,
"page": 1,
"totalCount": 1,
"dataFlags": [{
"flagNo": "N",
"flagCNName": "正常",
"comment": "",
"flagId": 1
}, {
"flagNo": "T",
"flagCNName": "超上限",
"comment": "",
"flagId": 2
}, {
"flagNo": "L",
"flagCNName": "超下限",
"comment": "",
"flagId": 3
}, {
"flagNo": "P",
"flagCNName": "电源故障",
"comment": "",
"flagId": 4
}, {
"flagNo": "D",
"flagCNName": "仪器故障",
"comment": "",
"flagId": 5
}, {
"flagNo": "F",
"flagCNName": "仪器通信故障",
"comment": "",
"flagId": 6
}, {
"flagNo": "B",
"flagCNName": "仪器离线",
"comment": "",
"flagId": 7
}, {
"flagNo": "Z",
"flagCNName": "取水点无水样",
"comment": "",
"flagId": 8
}, {
"flagNo": "S",
"flagCNName": "手工输入数据",
"comment": "",
"flagId": 9
}, {
"flagNo": "M",
"flagCNName": "维护调试数据",
"comment": "",
"flagId": 10
}, {
"flagNo": "hd",
"flagCNName": "现场启动测试",
"comment": "",
"flagId": 11
}]
},
computed: {
tableData: function () {
return this.data.map(item=>{
var g = {};
item.factorVal.forEach(v=>{
g[v.factorId] = v.standardValDisplay;
});
var nobj = {};
this.reportParams.forEach(v=>{
nobj[v.factorName] = v.factorId in g ? g[v.factorId] : "(没有找到对应的factorId)";
});
return Object.assign(nobj,item);
});
}
}
});
setTimeout(function(){
app.data[0].factorVal[2].standardValDisplay = "动态更新的数据"
}, 2000);
</script>
</body>
</html>
您好，我是问答小助手，你的问题已经有11个小伙伴为您解答了问题，您看下是否解决了您的问题。
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
<el-table :data="data" style="width: 100%">
<el-table-column prop="siteNo" label="站点编码" width="width">
</el-table-column>
<el-table-column prop="siteName" label="站点名称" width="width">
</el-table-column>
<el-table-column prop="statusName" label="状态" width="width">
</el-table-column>
<el-table-column prop="submitTime" label="监测时间" width="width">
</el-table-column>
<el-table-column prop="waterGradeName" label="水质类别" width="width">
</el-table-column>
<el-table-column v-for="(item,index) in data[0].factorVal" :key="index" :label="item.factorName" width="width">
<template v-slot="scope">
<span>{{scope.row.factorVal[index].flagCNName}}</span>
</template>
</el-table-column>
</el-table>
数据发出来