使用vue实现行列转换的一种方法。
- 2019 年 10 月 3 日
- 笔记
行列转换是一个老生常谈的问题，这几天逛知乎有遇到了这个问题。一个前端说，拿到的数据是单列的需要做转换才能够绑定，折腾了好久才搞定，还说这个应该后端直接出数据，不应该让前端折腾。
这个嘛，行列转换在后端也不是很好解决的问题，而且还有一个性能的问题，综合考虑，我还是觉得应该由前端进行行列转换。光说不练假把式，所以拿出来代码仅作为抛砖引玉，供大家参考一下，如果有更好的方法，欢迎一起来探讨。
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里面。
自我感觉注释写的还算可以的。如果有看不明白的，欢迎讨论。
最后效果图一张
