行列转换是一个老生常谈的问题,这几天逛知乎有遇到了这个问题。一个前端说,拿到的数据是单列的需要做转换才能够绑定,折腾了好久才搞定,还说这个应该后端直接出数据,不应该让前端折腾。
这个嘛,行列转换在后端也不是很好解决的问题,而且还有一个性能的问题,综合考虑,我还是觉得应该由前端进行行列转换。光说不练假把式,所以拿出来代码仅作为抛砖引玉,供大家参考一下,如果有更好的方法,欢迎一起来探讨。
1、模板设计。
1 <div id="app">
2 <table class="table_default1" style="width: 400px;">
3 <tr>
4 <th v-for="item in tableHeader">
5 {{item}}
6 </th>
7 </tr>
8 <tr v-for="tr in tableBody">
9 <td v-for="td in tr">
10 {{td}}
11 </td>
12 </tr>
13 </table>
14 </div>
这个比较简单,先遍历 tableHeader 把表头循环出来。
然后在双重遍历,tableBody 提供行数据,然后在遍历出来td。
这里没有任何与业务逻辑相关的代码,也就是说这个模板可以适合任何行列转换的需求。可以绑定出来 m行n列 的表格。
2、然后是vue实例部分
1 var form = new Vue({
2 el: "#app",
3 data: {
4 tableHeader: { }, //绑定表头
5 tableBody: { } //绑定数据
6 },
7 created: function () {
8 //代码在下面
9 }
10 });
这里data的两个成员都是空的,因为其结构要根据后台传递过来的数据决定,所以这里就不写了,当然 tableHeader 和 tableBody 还是要先写一下占个位置,否则模板的地方就没法写了。
不过还是先写一个结构参考一下,否则下面的代码估计看着会比较晕
2.1 tableHeader 的结构。这个很简单了。
1 {
2 name: "姓名",
3 studentID: "学号",
4 "数学": "数学",
5 "物理": "物理",
6 "英语": "英语",
7 "语文": "语文",
8 }
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、最后是转换函数
1 //得到测试数据
2 var testdata = [
3 {
4 studentID: 0001,
5 name: '小红',
6 subject: '数学',
7 mark: 100
8 }, {
9 studentID: 0001,
10 name: '小红',
11 subject: '语文',
12 mark: 90
13 }, {
14 studentID: 0001,
15 name: '小红',
16 subject: '英语',
17 mark: 91
18 }, {
19 studentID: 0002,
20 name: '小明',
21 subject: '数学',
22 mark: 93
23 }, {
24 studentID: 0002,
25 name: '小明',
26 subject: '语文',
27 mark: 87
28 }, {
29 studentID: 0002,
30 name: '小明',
31 subject: '英语',
32 mark: 88
33 }, {
34 studentID: 0002,
35 name: '小明',
36 subject: '物理',
37 mark: 88
38 }, {
39 studentID: 0003,
40 name: '韩梅梅',
41 subject: '数学',
42 mark: 94
43 }, {
44 studentID: 0003,
45 name: '韩梅梅',
46 subject: '语文',
47 mark: 99
48 }, {
49 studentID: 0003,
50 name: '韩梅梅',
51 subject: '英语',
52 mark: 98
53 }
54 ];
55
56 //第一次遍历,制作 tableHeader
57 var th = {}
58 th["studentID"] = '学号'; //固定列
59 th["name"] = '姓名';
60
61 //筛选科目
62 var thKey = {}
63 for (var i = 0; i < testdata.length; i++) {
64 thKey[testdata[i].subject] = 1; //动态列
65 }
66
67 //把科目加到th里面 ,动态增加列
68 for (var key in thKey) {
69 th[key] = key;
70 }
71
72 this.tableHeader = th;
73
74 //第二次遍历,制作tr的行
75 var tr = {};
76 for (var i = 0; i < testdata.length; i++) {
77 var d = testdata[i];
78 tr['s' + d.studentID] = {
79 studentID: d.studentID, //固定列
80 name: d.name
81 }
82 }
83 //第三次遍历,添加科目的成绩
84 for (var i = 0; i < testdata.length; i++) {
85 var d = testdata[i];
86 tr['s' + d.studentID][d.subject] = d.mark + 100; //动态列
87 }
88
89 this.tableBody = tr;
这个可以写在 created 里面,当然写在其他地方也可以,只要把数据给过去就行。
前面是给了一个测试数据,数据结构并不仅限于这样,改成其他的业务也是可以的,只需要知道 studentID 是一个标识列,确定有多少行。 name 是附带的,有没有都行,因为有可能重名,所以不能用name做标识,要用学号。
subject 是负责确定要增加多少列的,值相同的放到一列,不同的另起一列。
mark 是每一行的分数,和 subject 是key value的关系,subject 是key, Mark是value,只不过这个变成了上下关系。subject在表头,Mark在body里面。
自我感觉注释写的还算可以的。如果有看不明白的,欢迎讨论。
最后效果图一张