使用element-ui 的table 渲染数据遇到的问题
通常我们使用一个table 来渲染服务的返回来的数据时，数据结构一般都是按row 来返回的，并且表头也是固定的
但是如果接口返回的数据结构不是我们想要的，表头也不确定时，我们该如何解析数据，将数据进行二次加工，转换成为我们想要的数据结构
下面是一个例子，其中tableData 就是返回的数据，是按列返回的，我们通过遍历数据把它转化为行数据结构：
<template>
<div id="app">
<el-table :data="data_" border style="width: 100%" align='center'>
<el-table-column label="项目/机构" prop="name" align='center'></el-table-column>
<el-table-column
align='center'
v-for="(item, index) in thead"
:key="index" :label="item"
:prop="item">
</el-table-column>
</el-table>
</div>
</template>
<script>
import { jsonData } from 'views/data/data.js'
function formatter(row, column, cellValue, index) {
if (cellValue === 'undefined') {
// return ''
}
}
export default {
name: 'App',
components: {
// ElementDatatable
},
data() {
return {
theadChdren: [],
filterObj: {
value_4: '收入',
value_4_1: '运费收入',
value_5: '成本',
value_6: '毛利'
},
thead: [],
tableDatas: [
{
org_name: 'BW河北区',
rpt_date: '2018071',
value_1: 2444.0,
value_10: -43361.0,
value_11: -2.0,
value_12: -42616.3,
value_13: 748.7,
value_14: -43365.0,
value_2: 5444.0,
value_3: 4444.0,
value_4: 3322.1,
value_5: 19537.8,
value_6: -16215.7,
value_7: -70.0,
value_8: 20517.0,
value_9: 6558.3
},
{
org_name: 'BW河北省保定市植物园营业部',
"rpt_date":"2018071",
value_1: 2323.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省保定市裕华路营业部',
rpt_date: '2018071',
value_1: 5454.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省保定市集散点',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省唐山市路北区营业部',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省唐山市集散点',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省廊坊市盛德花园营业部',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省廊坊市祥泰花园营业部',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省廊坊市科技谷营业部',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省廊坊市集散点',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省承德市双桥区营业部',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省承德市双滦区营业部',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省石家庄市友谊北街营业部',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省石家庄市天山大街营业部',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省石家庄市建华南街营业站',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省石家庄市月季公园营业部',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省石家庄市红旗大街营业部',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省邯郸市丛台区营业部',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW河北省邯郸市集散点',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: 'BW石家庄集散中心',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: '石家庄',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.533,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
}
],
tableData: [
{
org_name: 'BW河北区',
rpt_date: '2018071',
value_1: 2444.0,
value_10: -43361.0,
value_11: -2.0,
value_12: -42616.3,
value_13: 748.7,
value_14: -43365.0,
value_2: 5444.0,
value_3: 4444.0,
value_4: 3322.1,
value_5: 19537.8,
value_6: -16215.7,
value_7: -70.0,
value_8: 20517.0,
value_9: 6558.3
},
{
org_name: '石家庄',
rpt_date: '2018071',
value_1: 4343.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
},
{
org_name: '石家庄',
rpt_date: '2018071',
value_1: 1222.0,
value_10: -22560.5,
value_11: -1.0,
value_12: -22188.15,
value_13: 374.35,
value_14: -22562.5,
value_2: 2222.0,
value_3: 1222.0,
value_4: 781.05,
value_5: 9768.9,
value_6: -8987.85,
value_7: -35.0,
value_8: 10258.5,
value_9: 3279.15
}
],
data_: [],
lastFilterObj: {}
}
},
created() {
this.filterObj = jsonData['PROJECT']
let obj_ = this.tableData[0]
for (let item of this.tableDatas) {
if (item.org_name) {
// this.thead.push(item.rpt_date)
this.thead.push(item.org_name)
}
}
for (let item of this.tableDatas) {
if (item.rpt_date) {
// this.thead.push(item.rpt_date)
this.theadChdren.push(item.rpt_date)
}
}
var arrs = []
this.tableData.map((item, index) => {
if (item[index] !== 'org_name' && item[index] !== 'rpt_date') {
arrs = Object.keys(item)
}
})
// console.log('返回keys', arrs)
// console.log('过滤前', this.filterObj)
let object_ = Object.assign({}, this.filterObj)
for (let key in object_) {
if (arrs.indexOf(key) === -1) {
if (
object_[key] == '营业部指标' ||
object_[key] == '集散仓指标' ||
object_[key] == '省区人员数量指标' ||
object_[key] == '分析指标'
) {
} else {
delete object_[key]
}
}
}
this.lastFilterObj = Object.assign({}, object_)
Object.keys(this.lastFilterObj).forEach(key => {
var obj = {
name: this.filter(key),
}
this.tableDatas.map((item, index) => {
// obj[item.rpt_date] = item[key]
obj[item.org_name] = item[key]
})
debugger
this.data_.push(obj)
})
console.log(this.data_)
},
methods: {
filter(key) {
if (this.lastFilterObj[key]) {
return this.lastFilterObj[key]
}
},
formatter(row, column, cellValue, index) {
if (cellValue === 'undefined') {
return '123'
}
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
使用element-ui 的table 渲染数据遇到的问题的更多相关文章
- （Element UI 组件 Table）去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
- element ui 合计/table show-summary
在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...
- 解决模糊查询问题 element UI 从服务器搜索数据，输入关键字进行查找
做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...
- Element Ui中table实现表格编辑效果
主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...
- Element UI的Table用法
Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...
- 怎么样使element ui 的table某列变色
第一步.在el-table里面加上:row-style="rowClass" <el-table :data="targetCarList" border ...
- Element UI 中国省市区级联数据
https://www.npmjs.com/package/element-china-area-data
- element ui里面table分页,页数从0开始的怎么做？
需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...
随机推荐
- 发布Hessian服务作为服务内部基础服务
摘要:Hessian经常作为服务内部RPC工具来使用,速度快效率高.重构代码的核心思想就是把共用的代码段提出来,使代码结构优化:架构设计类似,把基本的共用的服务提出来,使架构优化.下面讲述一下我在具体 ...
- BZOJ5299:[CQOI2018]解锁屏幕(状压DP)
Description 使用过Android手机的同学一定对手势解锁屏幕不陌生.Android的解锁屏幕由3x3个点组成,手指在屏幕上画一条 线将其中一些点连接起来,即可构成一个解锁图案.如下面三个例 ...
- [19/04/04-星期四] IO技术_CommonsIO(通用IO,别人造的轮子,FileUtils类 操作文件 & IOUtilsl类 操作里边的内容 )
一.概念 JDK中提供的文件操作相关的类,但是功能都非常基础,进行复杂操作时需要做大量编程工作.实际开发中,往往需要 你自己动手编写相关的代码,尤其在遍历目录文件时,经常用到递归,非常繁琐. Apac ...
- Charles Proxy v4.1.3 Mac、Win64、Win32破解版
http://charles.iiilab.com/ 1. 下载Charles Proxy 4.1.3版本,百度云盘下载 或 去官网下载 2. 安装后先打开Charles一次(Windows版可以忽略 ...
- heatmap for arcgisjsapi
在arcgis for js api 环境下使用heatmap插件. 由于最新的heatmap没有提供 for arcgisjsapi 插件,懒得研究新版本代码,所以这里用的还是老版本的heatma ...
- 正则表达式和decimal format的实际项目运用
最近review测试框架底层代码,一是看看有哪些可以重构的,以便减少冗余增加重用,二是优化一下代码结构增强代码的健壮性. 其中有一个地方印象比较深刻,特记录分享如下: 背景:在电商场景中,价格是特别重 ...
- SharePoint2013之双语切换
最近遇到个项目需要用SharePoint2013实现双语.看了篇老外的博客,经过项目经理的指点,终于算是搞定了(后面解释为什么说是"算是"). 在SharePoint2013中不像 ...
- 架构风格：你真的懂REST吗？
本文探讨如下几个问题: 什么是REST REST包含哪些约束 什么是RESTful 纯RESTful API的难点在哪里 如果你去搜索「什么是REST」的话,大部分情况下,你看到的基本都是RESTfu ...
- Java项目排查cpu负载高
背景 我负责的其中一个项目在空负载的情况下,CPU占用率依然保持着100%左右,线上.测试.开发的服务都一样:是什么导致的呢?在开发环境我查看了请求流量,这个流量可以忽略但CPU占用率一直在60%-1 ...
- iOS之创建通知、发送通知和移除通知的坑
1.创建通知,最好在viewDidLoad的方法中创建 - (void)viewDidLoad { [super viewDidLoad]; //创建通知 [[NSNotificationCenter ...