vue动态渲染表头，已有的固定表头拼接后台返回的表头

Question

固定的几个表头拼接上后台返回的表头，并显示数据

 

后台返回的数据分为两个数组，第一个是固定表头的数据；第二个数组是动态表头的个数；

 

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

 

Answer 1

先上结果图：如下

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

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

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