使用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 ...
随机推荐
- hdu 5955 Guessing the Dice Roll 【AC自动机+高斯消元】
hdu 5955 Guessing the Dice Roll [AC自动机+高斯消元] 题意:给出 n≤10 个长为 L≤10 的串,每次丢一个骰子,先出现的串赢,问获胜概率. 题解:裸的AC自动机 ...
- CentOS下go 安装
go 语言源码安装依赖 ,gcc ,make glibc库,等,上述工具安装省略,另外,其源代码更新采用的是mercurial 工具,安装前先安装mercureal : 1.mercurial安 ...
- jQuery 实现改变图片指定区域的颜色
javascript本身无法改变图片的颜色,不过我们可以通过一些技巧来实现一样的效果. 1.首先我们要知道图片哪些区域需要改变颜色,这里我们可以用执点地图的方法来弄 例1: <img src=& ...
- 15、SpringBoot-CRUD错误处理机制（2）
二.如何定制错误响应 1).如何定义错误处理页面 1.1.有模板引擎的情况下:error/状态码; [将错误页面命名为 错误状态码.html 放在模板引擎文件夹里面的error文件夹下 ...
- 【题解】洛谷P4180 [BJWC2010] 严格次小生成树（最小生成树+倍增求LCA）
洛谷P4180:https://www.luogu.org/problemnew/show/P4180 前言 这可以说是本蒟蒻打过最长的代码了 思路 先求出此图中的最小生成树 权值为tot 我们称这棵 ...
- 如何不使用 submit 按钮来提交表单？
如果我们不想用 submit 按钮来提交表单,我们也可以用超链接来提交,我们可以这样写代码: <a href=”javascript: document.myform.submit ();” ...
- 课时49.非input标签（掌握）
1.select标签(下拉列表) 什么是下拉列表? 这就是下拉列表 作用: 用于定义下拉列表 格式: <select> <option>列表数据</option> ...
- datatable去掉表头默认排序
禁用排序:"ordering":false 某一列禁用排序:"orderable":false 以某一列排序:"order":[[x,&qu ...
- ubuntu查找端口和kill
查看 : netstat -anp | grep 8080 结束: kill -9 进程号
- 判断ARP欺骗
转自http://bbs.51cto.com/thread-904594-1.html 网关是服务器或者单独主机设备的话 如果网关是服务器或者单独主机设备的话查询网关MAC地址要简单一些,我们只需要在 ...