行列轉(zhuǎn)換是一個(gè)老生常談的問題，這幾天逛知乎有遇到了這個(gè)問題。一個(gè)前端說，拿到的數(shù)據(jù)是單列的需要做轉(zhuǎn)換才能夠綁定，折騰了好久才搞定，還說這個(gè)應(yīng)該后端直接出數(shù)據(jù)，不應(yīng)該讓前端折騰。

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

1、模板設(shè)計(jì)。

 <div id="app">   <table class="table_default1" style="width: 400px;">     <tr>       <th v-for="item in tableHeader">         {{item}}        </th>     </tr>     <tr v-for="tr in tableBody">       <td v-for="td in tr">         {{td}}       </td>     </tr>   </table> </div>

這個(gè)比較簡單，先遍歷 tableHeader    把表頭循環(huán)出來。

然后在雙重遍歷，tableBody 提供行數(shù)據(jù)，然后在遍歷出來td。

這里沒有任何與業(yè)務(wù)邏輯相關(guān)的代碼，也就是說這個(gè)模板可以適合任何行列轉(zhuǎn)換的需求。可以綁定出來 m行n列  的表格。

2、然后是vue實(shí)例部分 

 var form = new Vue({     el: "#app",     data: {       tableHeader: { }, //綁定表頭       tableBody: { } //綁定數(shù)據(jù)     },     created: function () {       //代碼在下面     }   });

這里data的兩個(gè)成員都是空的，因?yàn)槠浣Y(jié)構(gòu)要根據(jù)后臺傳遞過來的數(shù)據(jù)決定，所以這里就不寫了，當(dāng)然 tableHeader 和 tableBody 還是要先寫一下占個(gè)位置，否則模板的地方就沒法寫了。

不過還是先寫一個(gè)結(jié)構(gòu)參考一下，否則下面的代碼估計(jì)看著會(huì)比較暈

2.1  tableHeader  的結(jié)構(gòu)。這個(gè)很簡單了。

 {   name: "姓名",   studentID: "學(xué)號",   "數(shù)學(xué)": "數(shù)學(xué)",   "物理": "物理",   "英語": "英語",   "語文": "語文", }

2.2  tableBody  的結(jié)構(gòu)。這里并沒有使用數(shù)組，因?yàn)閿?shù)組不好定位，用key的方式可以很方便的定位，key值的規(guī)律就是 標(biāo)識 + 學(xué)號，比如s1。純數(shù)字作為key，可能會(huì)有點(diǎn)問題，所以就加了個(gè)標(biāo)識。

對了，可以多一個(gè)科目的，比如“物理”，只要tableHeader里面有就可以。

{  s1: {    studentID: 1,    name: "小紅",     數(shù)學(xué): 200,    語文: 190,    英語: 191  }  s2: {    studentID: 2,     name: "小明",     數(shù)學(xué): 193,     語文: 187,    英語: 188,    物理: 99  }  s3: {    studentID: 3,     name: "韓梅梅",     數(shù)學(xué): 194,     語文: 199,     英語: 198  }}  

3、最后是轉(zhuǎn)換函數(shù)

//得到測試數(shù)據(jù)       var testdata = [         {           studentID: 0001,           name: '小紅',           subject: '數(shù)學(xué)',           mark: 100         }, {           studentID: 0001,           name: '小紅',           subject: '語文',           mark: 90         }, {           studentID: 0001,           name: '小紅',           subject: '英語',           mark: 91         }, {           studentID: 0002,           name: '小明',           subject: '數(shù)學(xué)',           mark: 93         }, {           studentID: 0002,           name: '小明',           subject: '語文',           mark: 87         }, {           studentID: 0002,           name: '小明',           subject: '英語',           mark: 88         }, {           studentID: 0002,           name: '小明',           subject: '物理',           mark: 88         }, {           studentID: 0003,           name: '韓梅梅',           subject: '數(shù)學(xué)',           mark: 94         }, {           studentID: 0003,           name: '韓梅梅',           subject: '語文',           mark: 99         }, {           studentID: 0003,           name: '韓梅梅',           subject: '英語',           mark: 98         }       ];       //第一次遍歷，制作 tableHeader       var th = {}       th["studentID"] = '學(xué)號'; //固定列       th["name"] = '姓名';       //篩選科目       var thKey = {}       for (var i = 0; i < testdata.length; i++) {         thKey[testdata[i].subject] = 1; //動(dòng)態(tài)列       }       //把科目加到th里面 ，動(dòng)態(tài)增加列       for (var key in thKey) {         th[key] = key;       }       this.tableHeader = th;       //第二次遍歷，制作tr的行       var tr = {};       for (var i = 0; i < testdata.length; i++) {         var d = testdata[i];         tr['s' + d.studentID] = {           studentID: d.studentID, //固定列           name: d.name         }       }       //第三次遍歷，添加科目的成績       for (var i = 0; i < testdata.length; i++) {         var d = testdata[i];         tr['s' + d.studentID][d.subject] = d.mark + 100; //動(dòng)態(tài)列       }       this.tableBody = tr;