element table 合并同类项并输出后台返回数据
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 合并同类项并输出后台返回数据的更多相关文章
- 后台返回数据为map集合,前端js处理方法
当后台返回的数据不是json而是map集合的时候,前端js中处理就将其看作是一个数组,例如后台返回的代码入下: Map<String, String> result = new HashM ...
- 后台返回数据判断是http还是后台本地图片 indexOf
今天的笔记呢,记录一下 其实这个应该后台去判断的,但是因为某种原因,今天我们前台做一下判断 事情是这样的,后台返回我一个url 这个url有的http开头的 也有他后台本地的例如:/img/1.pn ...
- AFN请求后台返回数据为NSInlineData类型的处理
在利用AFN进行数据解析时出现返回数据为 <7b227374 61747573 223a302c 226d6573 73616765 223a22e6 82a8e79a 84e6898b e69 ...
- 后台返回数据事null时怎么进行判断
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...
- 如何利用fis3来模拟后台返回数据
Node 版本要求 0.8.x,0.10.x, 0.12.x,4.x,6.x,不在此列表中的版本不予支持.最新版本 node 支持会第一时间跟进,支持后更新支持列表 1.安装fis3 npm inst ...
- jquery输出ajax返回数据中的时间戳转化为日期时间的函数
//第一种 function getLocalTime(nS) { ).toLocaleString().replace(/:\d{,}$/,' '); } alert(getLocalTime()) ...
- 前端模拟后台返回数据之Mockjs
一.官方文档: https://github.com/nuysoft/Mock/wiki/Syntax-Specification 例子:http://mockjs.com/examples.html ...
- 后台返回数据为treeList结构,如何添加属性(递归添加属性)
给tree形json数据添加默写属性(递归)addAttr(data){ for (var j = 0; j < data.length; j++) { data[j].title = data ...
- ajax中的后台返回数据data的意义
- 怎么解析后台返回数据中\r\n换行
给div添加css样式, white-space: pre-wrap; 即可 文章来源:刘俊涛的博客 欢迎关注公众号.留言.评论,一起学习. _________________________ ...
随机推荐
- 扩展KMP (ex_KMP)
一些约定: 字符串下标从1开始 s[1,i]表示S的第一个到第i个字符组成的字符串 解决的题型: 给你两个字符串A,B(A.size()=n,B.size()=m),求p数组 p[i]表示最大的len ...
- Angular Material 18+ 高级教程 – Datepicker の Calendar & Custom DateAdapter (Temporal)
前言 本篇只会教 Angular Material Datepicker 里最关键的组件 -- Calendar 组件. 还有如何自定义 DateAdapter,让 Calendar 支持 TC39 ...
- Angular Material 18+ 高级教程 – Material Tooltip
前言 一个常见的 Tooltip 使用场景是 当有 ellipsis 时,hover 显示全文. Tooltip 算是一种 Popover,我们之前有讲过,要搞 Popover 可以使用底层的 CDK ...
- JavaScript – ECMAScript 版本
参考 TC39.ECMA-262.ECMAScript 的一些事儿 简史 es3 千禧年后稳定版 es4 革命版本, 最后在 2008 年难产了 es5 2009 年推出, 拿了 es4 一些比较简单 ...
- ASP.NET Core – Web API 冷知识
Under/Over Posting 参考: .NET Core WebApi Action is executed even with missing properties in the reque ...
- JSP——EL表达式&JSTL标签
EL表达式 JSTL 标签 使用方法: if 标签 foreach 标签: <c:forEach items= ...
- 提升软件测试效率与灵活性:探索Mock测试的重要性
Mock测试是测试过程中的一种方法,用于替代那些难以构造或获取的对象,通过创建虚拟对象来进行测试.所谓难以构造的对象如何理解呢? 举例来说,像HttpServletRequest这样的对象需要在具有s ...
- 解决每次调试flask需要重启本地服务器的方法
export FLASK_ENV=development export FLASK_APP=hello.py flask run --debug
- 前端 面试 html css 如何让一个盒子水平垂直居中?
方法1 使用子绝父相 定位 推荐 说明: 让父元素相对定位,因为要让子元素以父元素为参考对象,如果父元素不设置定位,子元素的参考对象就是整个页面document: 子元素绝对定位,top:50%: ...
- otdolist 案例
1. 渲染默认任务 2. 回车添加任务 3. 删除任务 4. 底部任务数量 5. tab栏切换 6. tab切换显示不同任务 7. 清除已完成的任务 8. 头部全选 9. 删除任务