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. MiniMax:如何基于 JuiceFS 构建高性能、低成本的大模型 AI 平台

    MiniMax 成立于 2021 年 12 月,是领先的通用人工智能科技公司,致力于与用户共创智能.MiniMax 自主研发了不同模态的通用大模型,其中包括万亿参数的 MoE 文本大模型.语音大模型以 ...

  2. .NET 9 的新亮点:AI就绪 ,拥抱她

    .NET 9 即将发布 RC1, 今年初.NET 团队在发布.NET 9 Preview 1版本时写了一篇文章<我们对 .NET 9 的愿景>,其中特别提到了对AI的展望 .NET 9,我 ...

  3. DNN、CNN、RNN的区别

    参考1:CNN.RNN.DNN区别 参考2:一文读懂 CNN.DNN.RNN 内部网络结构区别 一张图解释所有: 感知机(输入层.输出层.一个隐藏层)-->不能解决复杂的函数-->神经网络 ...

  4. SQL limit字句

    limit用法介绍 limit子句可以返回检索查询行的某一连续的部分 用法介绍: SELECT column_list FROM table1 ORDER BY column_list LIMIT r ...

  5. Java项目笔记(五)

    这里写目录标题 @Valid 失效 解析jwt 无法建立SSL连接 windows下打jar包,读取nacos 配置文件 异常 @Valid 失效 加入以下依赖 <dependency> ...

  6. 使用 Ant-Design-Vue 制作一个带图片上传功能的表单对话框

    功能需求 使用 Antdv 的 Modal 组件内嵌一个 a-form 表单,具有添加数据和图片的功能. 页面结构设计 <template> <!--Modal--> < ...

  7. WeiXin.Export.20220726

    用 QuestPDF操作生成PDF更快更高效! Blazor Server 应用程序中进行 HTTP 请求 开源WPF控件库-AdonisUI FastTunnel-开源内网穿透框架 AI 之 Ope ...

  8. USB协议基础篇

    初次接触USB的同学,可能会被里面各种名词给搞晕,下面就来梳理一下这些知识,希望能帮助大家理解USB. 一,从最常见的名词说起 1.1 什么是USB 这个我就不多解释了,直译就是通用串行总线.再不明白 ...

  9. Oracle 23c 新特性实操体验优质文章汇总 | 有奖征文进行中欢迎参与

    继4月3日甲骨文宣布推出免费开发者版 Oracle Database 23c后,墨天轮社区发起 "Oracle 23c 免费开发者版特性体验"有奖征文活动,邀请大家分享Oracle ...

  10. Vue3 的emit3 属性和 props 属性?

    使用场景:使用父子组件通信的时候 : 作用: 用来声明组件有哪些自定义事件,不在emtis里面都会当成原生事件,绑定给组件的根标 签. 好处: 不在像 vue2 使用  .native 修饰符 在 v ...