使用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 ...
随机推荐
- 使用Vue-cli脚手架
使用vue-cli脚手架开发vue项目,有以下好处: (1)成熟的Vue项目架构设计. (2)本地测试服务器(热更新). (3)集成打包上线方案. Vue-cli系统要求: Node.js(>= ...
- 在一个应用中如果同一个Spring 的IOC容器被实例化两次就会出现 CannotAcquireResourceException 异常
现象描述:我在一个Junit 的测试类中实例化IOC容器 : ac = new ClassPathXmlApplicationContext("applicationContext.xml& ...
- BZOJ2427:[HAOI2010]软件安装(树形DP,强连通分量)
Description 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件的价值尽可能大(即Vi的和 ...
- BZOJ1614:[USACO]Telephone Lines架设电话线(二分,最短路)
Description FarmerJohn打算将电话线引到自己的农场,但电信公司并不打算为他提供免费服务.于是,FJ必须为此向电信公司 支付一定的费用.FJ的农场周围分布着N(1<=N< ...
- select、poll和epoll比较
select select能监控的描述符个数由内核中的FD_SETSIZE限制,仅为1024,这也是select最大的缺点,因为现在的服务器并发量远远不止1024.即使能重新编译内核改变FD_SETS ...
- php 多种输入参数完整性检查
说明:(1)输入可能有多重类型的输入,即需要对输入参数进行多次匹配. (2)希望能够返回缺少的参数 代码如下: /** * @param $param 输入参数 (get,post 参数) * @pa ...
- js秒换成天时分
js秒换成天时分 function timeStamp( second_time ){ var time = parseInt(second_time) + "秒"; if( pa ...
- 阿贾克斯（AJAX）
AJAX :Asynchronous JavaScript and XML 异步的javascript 和xml 优点 : 在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分数据 不需要 ...
- SharePoint2013之双语切换
最近遇到个项目需要用SharePoint2013实现双语.看了篇老外的博客,经过项目经理的指点,终于算是搞定了(后面解释为什么说是"算是"). 在SharePoint2013中不像 ...
- 轻量ORM-SqlRepoEx （八）MySQL、Sql Service 迁移
数据库变更在编程应用中是常的,MySQL.Sql Service之间的数据迁移更为常见,在 SqlRepoEx2.0DemoForAspCore中演示了,这种数据库之间切换时SqlRepoEx是如何的 ...