table的样式如下

后台返回的数据格式是按照横着来的,因为表头是经过处理的,而且是作为独立出来的数据返给前端的,所以当我们进行数据填充的时候需要用到后台返回的完整的数据,要想一一对应的话,我们需要进行一下转化,转化方式如下:

res.content.data.map(it = > {
it.dataList.map((item, i) = > {
it[item.month + item.year] = item.indexValue;
});
});

将indexValue对应的值,赋值给一个新的变量,为了保证变量的唯一性,就将月份和年份加在一起,保证其唯一性,然后再页面中的输出是这样的:

<el-table-column
class-name="right-money"
v-for="(item,index) in colDefList"
min-width="84"
:key="index"
:label="item.year + '年'"
>
<template>
<el-table-column
width="140"
:key="index"
v-for="(it, index) in item.origin"
:label="changeValue(it.month)"
:prop="it.month + it.year"
></el-table-column>
</template>
</el-table-column>
changeValue方法是对月份展示的一个处理,这样就可以正确输出数据了

element table 合并同类项并输出后台返回数据的更多相关文章

  1. 后台返回数据为map集合,前端js处理方法

    当后台返回的数据不是json而是map集合的时候,前端js中处理就将其看作是一个数组,例如后台返回的代码入下: Map<String, String> result = new HashM ...

  2. 后台返回数据判断是http还是后台本地图片 indexOf

    今天的笔记呢,记录一下 其实这个应该后台去判断的,但是因为某种原因,今天我们前台做一下判断 事情是这样的,后台返回我一个url  这个url有的http开头的 也有他后台本地的例如:/img/1.pn ...

  3. AFN请求后台返回数据为NSInlineData类型的处理

    在利用AFN进行数据解析时出现返回数据为 <7b227374 61747573 223a302c 226d6573 73616765 223a22e6 82a8e79a 84e6898b e69 ...

  4. 后台返回数据事null时怎么进行判断

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...

  5. 如何利用fis3来模拟后台返回数据

    Node 版本要求 0.8.x,0.10.x, 0.12.x,4.x,6.x,不在此列表中的版本不予支持.最新版本 node 支持会第一时间跟进,支持后更新支持列表 1.安装fis3 npm inst ...

  6. jquery输出ajax返回数据中的时间戳转化为日期时间的函数

    //第一种 function getLocalTime(nS) { ).toLocaleString().replace(/:\d{,}$/,' '); } alert(getLocalTime()) ...

  7. 前端模拟后台返回数据之Mockjs

    一.官方文档: https://github.com/nuysoft/Mock/wiki/Syntax-Specification 例子:http://mockjs.com/examples.html ...

  8. 后台返回数据为treeList结构,如何添加属性(递归添加属性)

    给tree形json数据添加默写属性(递归)addAttr(data){ for (var j = 0; j < data.length; j++) { data[j].title = data ...

  9. ajax中的后台返回数据data的意义

  10. 怎么解析后台返回数据中\r\n换行

      给div添加css样式, white-space: pre-wrap; 即可   文章来源:刘俊涛的博客 欢迎关注公众号.留言.评论,一起学习. _________________________ ...

随机推荐

  1. 扩展KMP (ex_KMP)

    一些约定: 字符串下标从1开始 s[1,i]表示S的第一个到第i个字符组成的字符串 解决的题型: 给你两个字符串A,B(A.size()=n,B.size()=m),求p数组 p[i]表示最大的len ...

  2. Angular Material 18+ 高级教程 – Datepicker の Calendar & Custom DateAdapter (Temporal)

    前言 本篇只会教 Angular Material Datepicker 里最关键的组件 -- Calendar 组件. 还有如何自定义 DateAdapter,让 Calendar 支持 TC39 ...

  3. Angular Material 18+ 高级教程 – Material Tooltip

    前言 一个常见的 Tooltip 使用场景是 当有 ellipsis 时,hover 显示全文. Tooltip 算是一种 Popover,我们之前有讲过,要搞 Popover 可以使用底层的 CDK ...

  4. JavaScript – ECMAScript 版本

    参考 TC39.ECMA-262.ECMAScript 的一些事儿 简史 es3 千禧年后稳定版 es4 革命版本, 最后在 2008 年难产了 es5 2009 年推出, 拿了 es4 一些比较简单 ...

  5. ASP.NET Core – Web API 冷知识

    Under/Over Posting 参考: .NET Core WebApi Action is executed even with missing properties in the reque ...

  6. JSP——EL表达式&JSTL标签

    EL表达式          JSTL 标签         使用方法:          if 标签            foreach 标签:      <c:forEach items= ...

  7. 提升软件测试效率与灵活性:探索Mock测试的重要性

    Mock测试是测试过程中的一种方法,用于替代那些难以构造或获取的对象,通过创建虚拟对象来进行测试.所谓难以构造的对象如何理解呢? 举例来说,像HttpServletRequest这样的对象需要在具有s ...

  8. 解决每次调试flask需要重启本地服务器的方法

    export FLASK_ENV=development export FLASK_APP=hello.py flask run --debug

  9. 前端 面试 html css 如何让一个盒子水平垂直居中?

    方法1  使用子绝父相 定位  推荐 说明: 让父元素相对定位,因为要让子元素以父元素为参考对象,如果父元素不设置定位,子元素的参考对象就是整个页面document: 子元素绝对定位,top:50%: ...

  10. otdolist 案例

    1. 渲染默认任务 2. 回车添加任务 3. 删除任务 4. 底部任务数量 5.  tab栏切换 6. tab切换显示不同任务 7. 清除已完成的任务 8.  头部全选 9. 删除任务