行列转换是一个老生常谈的问题,这几天逛知乎有遇到了这个问题。一个前端说,拿到的数据是单列的需要做转换才能够绑定,折腾了好久才搞定,还说这个应该后端直接出数据,不应该让前端折腾。

  这个嘛,行列转换在后端也不是很好解决的问题,而且还有一个性能的问题,综合考虑,我还是觉得应该由前端进行行列转换。光说不练假把式,所以拿出来代码仅作为抛砖引玉,供大家参考一下,如果有更好的方法,欢迎一起来探讨。

  1、模板设计。

  

 <div id="app">
<table class="table_default1" style="width: 400px;">
<tr>
<th v-for="item in tableHeader">
{{item}}
</th>
</tr>
<tr v-for="tr in tableBody">
<td v-for="td in tr">
{{td}}
</td>
</tr>
</table>
</div>

  这个比较简单,先遍历 tableHeader    把表头循环出来。

  然后在双重遍历,tableBody 提供行数据,然后在遍历出来td。

  这里没有任何与业务逻辑相关的代码,也就是说这个模板可以适合任何行列转换的需求。可以绑定出来 m行n列 的表格。

  2、然后是vue实例部分  

 var form = new Vue({
el: "#app",
data: {
tableHeader: { }, //绑定表头
tableBody: { } //绑定数据
},
created: function () {
//代码在下面
}
});

  这里data的两个成员都是空的,因为其结构要根据后台传递过来的数据决定,所以这里就不写了,当然 tableHeader 和 tableBody 还是要先写一下占个位置,否则模板的地方就没法写了。

  不过还是先写一个结构参考一下,否则下面的代码估计看着会比较晕

  2.1  tableHeader  的结构。这个很简单了。

 {
name: "姓名",
studentID: "学号",
"数学": "数学",
"物理": "物理",
"英语": "英语",
"语文": "语文",
}

  2.2  tableBody  的结构。这里并没有使用数组,因为数组不好定位,用key的方式可以很方便的定位,key值的规律就是 标识 + 学号,比如s1。纯数字作为key,可能会有点问题,所以就加了个标识。

对了,可以多一个科目的,比如“物理”,只要tableHeader里面有就可以。

{
s1: {
studentID: 1,
name: "小红",
数学: 200,
语文: 190,
英语: 191
}
s2: {
studentID: 2,
name: "小明",
数学: 193,
语文: 187,
英语: 188,
物理: 99
}
s3: {
studentID: 3,
name: "韩梅梅",
数学: 194,
语文: 199,
英语: 198
}
}

  3、最后是转换函数

  //得到测试数据
var testdata = [
{
studentID: 0001,
name: '小红',
subject: '数学',
mark: 100
}, {
studentID: 0001,
name: '小红',
subject: '语文',
mark: 90
}, {
studentID: 0001,
name: '小红',
subject: '英语',
mark: 91
}, {
studentID: 0002,
name: '小明',
subject: '数学',
mark: 93
}, {
studentID: 0002,
name: '小明',
subject: '语文',
mark: 87
}, {
studentID: 0002,
name: '小明',
subject: '英语',
mark: 88
}, {
studentID: 0002,
name: '小明',
subject: '物理',
mark: 88
}, {
studentID: 0003,
name: '韩梅梅',
subject: '数学',
mark: 94
}, {
studentID: 0003,
name: '韩梅梅',
subject: '语文',
mark: 99
}, {
studentID: 0003,
name: '韩梅梅',
subject: '英语',
mark: 98
}
]; //第一次遍历,制作 tableHeader
var th = {}
th["studentID"] = '学号'; //固定列
th["name"] = '姓名'; //筛选科目
var thKey = {}
for (var i = 0; i < testdata.length; i++) {
thKey[testdata[i].subject] = 1; //动态列
} //把科目加到th里面 ,动态增加列
for (var key in thKey) {
th[key] = key;
} this.tableHeader = th; //第二次遍历,制作tr的行
var tr = {};
for (var i = 0; i < testdata.length; i++) {
var d = testdata[i];
tr['s' + d.studentID] = {
studentID: d.studentID, //固定列
name: d.name
}
}
//第三次遍历,添加科目的成绩
for (var i = 0; i < testdata.length; i++) {
var d = testdata[i];
tr['s' + d.studentID][d.subject] = d.mark + 100; //动态列
} this.tableBody = tr;

  这个可以写在 created 里面,当然写在其他地方也可以,只要把数据给过去就行。

  前面是给了一个测试数据,数据结构并不仅限于这样,改成其他的业务也是可以的,只需要知道 studentID 是一个标识列,确定有多少行。 name 是附带的,有没有都行,因为有可能重名,所以不能用name做标识,要用学号。

  subject 是负责确定要增加多少列的,值相同的放到一列,不同的另起一列。

  mark 是每一行的分数,和 subject 是key value的关系,subject 是key, Mark是value,只不过这个变成了上下关系。subject在表头,Mark在body里面。

  自我感觉注释写的还算可以的。如果有看不明白的,欢迎讨论。

  最后效果图一张

  

使用vue实现行列转换的一种方法。的更多相关文章

  1. SAP行列转换的一种方法

    一段经典的代码写在这里 TABLES spfli. DATA: lt_data TYPE STANDARD TABLE OF spfli, lwa_ref TYPE REF TO data, lt_f ...

  2. java字符串大小写转换的两种方法

    转载自:飞扬青春sina blogjava字符串大小写转换的两种方法 import java.io..* public class convertToPrintString {          pu ...

  3. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  4. Oracle学习之路-- 案例分析实现行列转换的几种方式

    注:本文使用的数据库表为oracle自带scott用户下的emp,dept等表结构. 通过一个例子来说明行列转换: 需求:查询每个部门中各个职位的总工资 按我们最原始的思路可能会这么写:       ...

  5. vue实现打印功能的两种方法

    第一种方法:通过npm 安装插件 1,安装  npm install vue-print-nb --save 2,引入  安装好以后在main.js文件中引入 import Print from 'v ...

  6. Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)

    Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...

  7. vue中数据请求的三种方法

    注意请求可能存在跨域问题,需要去配置好 这三种建议使用axios 1.resource Vue 要实现异步加载需要使用到 vue-resource 库. Vue.js 2.0 版本推荐使用 axios ...

  8. js时间格式转换的几种方法

    公司项目需要获取时间并且转换格式,之前没有实现过但读过源码,新来的小哥给我讲了下细节.算是学到了..... function getLocalTime(){ var now=new Date(); v ...

  9. C#多显示器转换的两种方法——SetWindowPos,Screen

    原文 http://blog.csdn.net/hejialin666/article/details/6057551 实现多屏显示目的:一般情况下是一个电脑显示屏,外接一个电视显示屏.在电脑上显示的 ...

随机推荐

  1. 一文学会Java死锁和CPU 100% 问题的排查技巧

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开 工欲善其事,必先利其器 00 本文简介 作为一名搞技术的程序猿或者是攻城狮,想必你应该是对下面这两个问题有所了解,说不定你在 ...

  2. 安装R和Rstudio后,Rstudio出现空白和fatal error问题

    解决方法: 1.一定要以管理员方式启动Rstudio 2.只能安装一个R版本,之前安装的其他版本需要卸载干净 3.R和Rstudio需要安装在同一目录下

  3. MAC iterm2 常用快捷键大全

    标签 新建标签:command + t 关闭标签:command + w 切换标签:command + 数字 / command + 左右方向键 切换全屏:command + enter 查找:com ...

  4. JavaScript-倒计时效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Qt之股票组件-自选股--列表可以拖拽、右键常用菜单

    目录 一.开头嘴一嘴 二.效果展示 三.自选股列表 1.列表初始化 2.添加Item 3.右键菜单 4.拖拽Item 5.刷新数据 四.相关文章 原文链接:Qt之股票组件-自选股--列表可以拖拽.右键 ...

  6. SQL高度优化

      受同事dd之托,优化一条boss看的报表SQL.dd写复杂疑难SQL无数,如何写出优雅的SQL自有一番心得体会.能将一条7表含inner join,left join并含有关联子查询的.返回结果集 ...

  7. 看看大神 Paul Graham 对如何学习编程的回答

    前言 我翻阅自己之前写的博客文章,发现在 2015 年我刚开始学习编程的时候,翻译了一段 Paul Graham 关于"How can I learn to program?"的回 ...

  8. scrapy 发post请求

    可以使用 yield scrapy.FormRequest(url, formdata, callback)方法发送POST请求. 如果希望程序执行一开始就发送POST请求,可以重写Spider类的s ...

  9. curl请求的get.post.put.delete对接其他系统接口方法

    class HttpCurl{ //控客云平台的appid private $appId = xxxxxx; //控客云平台的appkey private $appKey = 'xxxxxxxxxxx ...

  10. Java NIO学习系列四:NIO和IO对比

    前面的一些文章中我总结了一些Java IO和NIO相关的主要知识点,也是管中窥豹,IO类库已经功能很强大了,但是Java 为什么又要引入NIO,这是我一直不是很清楚的?前面也只是简单提及了一下:因为性 ...