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. Kafka原理剖析之「Topic创建」

    一.前言 Kafka提供了高性能的读写,而这些读写操作均是操作在Topic上的,Topic的创建就尤为关键,其中涉及分区分配策略.状态流转等,而Topic的新建语句非常简单 bash kafka-to ...

  2. LeetCode 二叉树的最近公共祖先

    一.二叉搜索树的最近公共祖先 利用二叉搜索树的性质,祖先的两个孩子,左孩子的小于根节点的值,右孩子大于根节点的值. 如果根节点的值,同时大于p的值和q的值,那么在左子树找根节点: 如果根节点的值,同时 ...

  3. Kubernetes基础(kube-apiserver?kube-controller-manager?kube-scheduler?kubelet?kube-proxy?kubectl?)(十一)

    一.kube-apiserver API Server 提供了资源对象的唯一操作入口,其它所有组件都必须通过它提供的 API 来操作资源数据.只有 API Server 会与 etcd 进行通信,其它 ...

  4. Nacos 配置加密

    Nacos 配置加密 nacos配置加密官网 官网介绍太简单,而且GitHub 网络受限,随缘访问.Gitee 发现有镜像仓库,同步的最新版本 Gitee nacos 镜像仓库 但是官网中提到的加密插 ...

  5. 《Vue.js 设计与实现》读书笔记 - 第8章、挂载与更新

    第8章.挂载与更新 8.1 挂载子节点和元素的属性 扩展子元素的类型可以为数组,并判断如果是数组的话,就先依次挂载所有的子元素. 同时新增节点属性.属性可以通过 el.setAttribute 添加到 ...

  6. /proc/pids/status

    /proc/279/status是一个Linux内核中的文件,其中包含了当前进程的状态信息.每行的含义如下: Name: 进程的名称,例如"java"或"bash&quo ...

  7. vue2基于 vue-cropper插件对图片裁剪

    <template> <div id="app"> <div class="model" v-show="model&q ...

  8. ssh建立github连接 基于ssh密钥

    1. 建立公钥和私钥 ps:公钥放在github上面的,私钥放在自己本地电脑 : 先生成密钥:打开 gitbash 输入命令: ssh-keygen -t rsa -b 4096 -C "z ...

  9. 使用 GitLab 账号登陆 KubeSphere

    作者:李帅 介绍 KubeSphere 多租户是实际生产使用中非常需要的一个功能,该功能满足不同用户登陆 KubeSphere 平台的需求.比如开发,运维,测试都需要登陆 KubeSphere 平台, ...

  10. activiti教程

    一.工作流介绍 1.1 概念 工作流(Workflow),就是通过计算机对业务流程自动化执行管理.它主要解决的是"使在多个参与者之间按照某种预定义的规则自动进行传递文档.信息或任务的过程,从 ...