vue element-ui动态横向统计表格

表格结构

<el-table:data="AllData"style="width: 100%"><el-table-columnprop="title"label="统计"></el-table-column><el-table-columnv-for="(item,index) in allList":prop="item.key":key="index":label="item.feeName"></el-table-column><el-table-columnprop="join"label="合计"></el-table-column></el-table>

data

AllData:[],
allList:[],

methods：

setData(){//这里请求后台的统计信息，合计可以在我这里进行运算var getData = [{title:'未入账',data:[{feeName:'考试费1',num:2001,},{feeName:'考试费2',num:2002,},{feeName:'考试费3',num:2003,},{feeName:'考试费4',num:2004,}]}]for (var i in getData){var a = {}var b = []a['title'] = getData[i].titlevar x = 0var join = 0getData[i].data.forEach(function (e){x+=1join+=e.numb.push({feeName:e.feeName,key:'num'+x})a['num'+x] =  e.numa['join'] = join})this.AllData.push(a)this.allList = b}},

请求到 getData这个json之后就组建新的对象

created(){this.setData()},

最后上效果图…

附：
如果增加下面图中json对象的对应数据，表格可以横轴纵轴增加数据

vue element-ui动态横向统计表格相关推荐

VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
vue + Element UI 动态Breadcrumb 面包屑的制作
文章目录效果一.路由配置二.使用步骤 1.Breadcrumb.vue: 2.在页面中使用总结效果面包屑用于显示当前页面的路径,快速返回之前的任意页面. 一.路由配置代码如下: impo ...
web前端-vue element UI el-table，el-table-column表格添加行点击事件
el-table如下数据一.el-table 整行都可以点击事件定义点击事件 @row-click="openDetails":openDetails为方法名 <!-- ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
html5 前端动态加载后端,Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）...
vue+element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 elementui官网引导关键配置 template中,form和form-item的写法和绑定 data里的 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...

vue element-ui动态横向统计表格

vue element-ui动态横向统计表格相关推荐

最新文章

热门文章