代码改变世界

使用vue实现行列转换的一种方法。

2019-08-06 14:20  金色海洋（jyk）  阅读(5597)  评论(1)  编辑  收藏  举报

　　

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

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

 

　　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里面。

 

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

 

　　最后效果图一张

 

 

　　

2