使用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 ...
随机推荐
- gulp使用方法总结
gulp是用于前端构建的基于文件流的一套工具.可以用于压缩.编译.合并.检查文件等操作.可以节省大量的用于繁琐重复操作的人力.最开始就是安装gulp工具了,在命令行中切换到工作的文件目录下,安装gul ...
- 基于IDEA的JavaWeb开发环境搭建
基于IDEA的JavaWeb开发环境搭建 基于IDEA的JavaWeb开发环境搭建 jdk下载安装配置环境变量 下载 安装 配置环境变量 下载安装激活使用IntelliJ IDEA 下载 安装 激活 ...
- Gradle入门实战（Windows版）
Installation Gradle runs on all major operating systems and requires only a Java JDK or JRE version ...
- shell脚本中针对sudo等密码输入的问题解决方案
一.不希望手动输入的办法 1.安装expect工具:sudo apt-get install tcl tk expect 2.脚本文件内容如下: #! /usr/bin/expectspawn sud ...
- 3spring:生命周期，属性赋值，自动装配
有不懂的可以参考之前的文章! https://www.cnblogs.com/Mrchengs/p/10109053.html 1.Bean的生命周期 创建---初始化---销毁 容器管理 ...
- 理解JavaScript原始类型和引用类型
原始类型 我们知道类型(type)定义为值的一个集合,所以每种原始类型定义了它包含的值的范围及其字面量表示形式.一共有5 种原始类型(primitive type),即 Undefined.Null. ...
- idea删除module
先remove , 再点击delete
- 两种方式（xml+代码）构建SqlSessionFactory+完整实现
首先创建类.接口.数据库: entity包下Admin类: package com.wbg.springJavaConfig.entity; public class Admin { private ...
- VS进行调试时IIS Express显示Access Define-坑爹的腾讯TGP助手
今天在家使用VS进行调试的时候发现IIS Express死活启动不了,改用IIS也是不行,尝试了网上所说的所有办法,改了各种权限,找了各种注册表,最终未果,然后我想起之前被腾讯坑过的那次:http:/ ...
- Vue教程：过滤器filters（五）
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...