使用vue實現行列轉換的一種方法。

金色海洋（jyk）陽光男孩發表於2019-08-06
Vue

　　

　　行列轉換是一個老生常談的問題，這幾天逛知乎有遇到了這個問題。一個前端說，拿到的資料是單列的需要做轉換才能夠繫結，折騰了好久才搞定，還說這個應該後端直接出資料，不應該讓前端折騰。

　　這個嘛，行列轉換在後端也不是很好解決的問題，而且還有一個效能的問題，綜合考慮，我還是覺得應該由前端進行行列轉換。光說不練假把式，所以拿出來程式碼僅作為拋磚引玉，供大家參考一下，如果有更好的方法，歡迎一起來探討。

 

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

 

　　自我感覺註釋寫的還算可以的。如果有看不明白的，歡迎討論。

 

　　最後效果圖一張

 

 

　　

相關文章