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

不点 阅读:716 2022-04-14 11:22:46 评论:0

  

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

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

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

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

  最后效果图一张

  


标签:VUE
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号