weixin_44525083 2021-03-11 08:05 采纳率: 33.3%
浏览 972
已采纳

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 02: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-12 02:41

    思路就是这样了,当然我这个是直接用factorName关联的,用factorId关联思路是一样的

    回复
查看更多回答(13条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 KeiI中头文件找不到怎么解决
  • ¥15 QT6将音频采样数据转PCM
  • ¥15 本地安装org.Hs.eg.dby一直这样的图片报错如何解决?
  • ¥15 下面三个文件分别是OFDM波形的数据,我的思路公式和我写的成像算法代码,有没有人能帮我改一改,如何解决?
  • ¥15 Ubuntu打开gazebo模型调不出来,如何解决?
  • ¥100 有chang请一位会arm和dsp的朋友解读一个工程
  • ¥50 求代做一个阿里云百炼的小实验
  • ¥15 查询优化:A表100000行,B表2000 行,内存页大小只有20页,运行时3页,设计两个表等值连接的最简单的算法
  • ¥15 led数码显示控制(标签-流程图)
  • ¥20 为什么在复位后出现错误帧
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部