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; 即可 文章来源:刘俊涛的博客 欢迎关注公众号.留言.评论,一起学习. _________________________ ...
随机推荐
- 开源项目管理工具 Plane 安装和使用教程
说到项目管理工具,很多人脑海中第一个蹦出来的可能就是 Jira 了.没错,Jira 确实很强大,但是...它也有点太强大了,既复杂又昂贵,而且目前也不再提供私有化部署版本了. 再说说飞书,作为国产之光 ...
- 【Azure Developer】上手 The Best AI Code "Cursor" : 仅仅7次对话,制作个人页面原型,效果让人惊叹!
AI Code 时代早已开启,自己才行动.上手一试,让人惊叹.借助这感叹的情绪,把今天操作Cursor的步骤记录下来,也分享给大家. 推荐大家上手一试,让你改变! 准备阶段 下载 Cursor(htt ...
- 微前端实践MicroApp
微前端实践 本文主要是关于microApp的实践过程记录 本文主要内容如下: 什么是MicroApp? MicroApp的父子通讯方式以及路由介绍 如何部署相关应用? 安装 npm i @micro- ...
- Genuine Intel(R) CPU型号
起因: 在盘点固定资产的时候,发现有一台电脑CPU不显示具体型号,而是 英特尔 @ 2.60GHz (X2) ,通过主板型号来判断是至强系列的CPU,后经软件识别为 Genuine ,然后去查资料才了 ...
- 墨天轮沙龙 | 北京大学李文杰:面向知识图谱应用的图数据库系统gStore
在6月8日举办的[墨天轮数据库沙龙第七期-开源生态专场]中,北京大学重庆大数据研究院图数据库与知识图谱实验室副主任.北京大学王选计算机研究所全职博士后 李文杰老师分享了<面向知识图谱应用的图数据 ...
- YoloDotNet v2.1:实时物体检测的利器
项目介绍 YoloDotNet v2.1 是一个基于 C# 和 .NET 8 的实时物体检测框架,专为图像和视频中的物体检测而设计.它集成了 Yolov8 ~ Yolov11 模型,通过 ML.NET ...
- signalR的身份认证
- Android复习(二)应用资源——>可绘制对象资源
可绘制对象资源是图形的一般概念,是指可在屏幕上绘制的图形,以及可使用 getDrawable(int) 等 API 检索,或应用到拥有 android:drawable 和 android:icon ...
- SaaS架构:中央库存系统架构设计
大家好,我是汤师爷~ 近年来,越来越多的零售企业大力发展全渠道业务.在销售额增长上,通过线上的小程序.直播.平台渠道等方式,拓展流量变现渠道.在会员增长方面,通过多样的互动方式,全渠道触达消费者,扩大 ...
- KubeSphere 社区双周报 | OpenFunction 支持 Dapr 状态管理 | 2023.03.31-04.13
KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...