weixin_44525083
2021-03-11 16:05
采纳率: 50%
浏览 700

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}]}

 

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

14条回答 默认 最新

  • 流转的年华 2021-03-12 10:29
    已采纳

    先上结果图:如下

    分析下数据:大概是这个意思

    如果事先把固定表头写在界面的话,等获取数据后再渲染动态表头,表头会出现明显变化。显然不满足要求。分析完,我们就来简单实现。

    <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>
    打赏 评论
  • 沫琉璃 2021-03-11 16:22
     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))

     

    1 打赏 评论
  • 天际的海浪 2021-03-11 23:04
    <!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>
    1 打赏 评论
  • 天际的海浪 2021-03-11 16:14

    我看看。。。。。。。

     

    <!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>
    打赏 评论
  • 打杂的程序员 2021-03-11 16:17

    两个id相同的时候把两个数组合并在一起,然后循环查出来所有factorName不重复的当做表头,循环渲染合并后的数组就行了。

    打赏 评论
  • weixin_44525083 2021-03-11 16:34

    结合element或者iview组件实现,要注意的一点是后台返回的数据,reportParams数组只是循环拼接表头的作用,主要问题在于如何与data数组中的factorVal数组进行id比较,比较之后再去显示对应表头的数据

    打赏 评论
  • 风不二 2021-03-11 17:11
    1. 固定表头声明好
    2. function mergeHeader(dynamic) {     return newHeader } //获取数据里面的key(只取固定表头之外的) 生成动态表头
    3. 渲染数据
    打赏 评论
  • tule. 2021-03-11 17:11

    打赏 评论
  • Proud lion 2021-03-11 18:06

    你看这个数据对吗

    [{"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}]
    打赏 评论
  • 天际的海浪 2021-03-12 03:49

    动态更新的数据需要用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>
    
    打赏 评论
  • 有问必答小助手 2021-03-12 14:10

    您好,我是问答小助手,你的问题已经有11个小伙伴为您解答了问题,您看下是否解决了您的问题。

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    打赏 评论
  • qq_21134585 2021-03-30 17:12

    打赏 评论
  • qq_21134585 2021-03-30 17:16

        <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>

    打赏 评论
  • 嚯嚯嚯~哈 2021-03-11 16:17

    数据发出来

    1 打赏 评论

相关推荐 更多相似问题