vue實(shí)現(xiàn)行列轉(zhuǎn)換的一種方法

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 21:52:36

vue實(shí)現(xiàn)行列轉(zhuǎn)換的一種方法

vue實(shí)現(xiàn)行列轉(zhuǎn)換的一種方法:行列轉(zhuǎn)換是一個老生常談的問題，這幾天逛知乎有遇到了這個問題。一個前端說，拿到的數(shù)據(jù)是單列的需要做轉(zhuǎn)換才能夠綁定，折騰了好久才搞定，還說這個應(yīng)該后端直接出數(shù)據(jù)，不應(yīng)該讓前端折騰。這個嘛，行列轉(zhuǎn)換在后端也不是很好解決的問題，而且還有一個性能的

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue實(shí)現(xiàn)行列轉(zhuǎn)換的一種方法:行列轉(zhuǎn)換是一個老生常談的問題，這幾天逛知乎有遇到了這個問題。一個前端說，拿到的數(shù)據(jù)是單列的需要做轉(zhuǎn)換才能夠綁定，折騰了好久才搞定，還說這個應(yīng)該后端直接出數(shù)據(jù)，不應(yīng)該讓前端折騰。這個嘛，行列轉(zhuǎn)換在后端也不是很好解決的問題，而且還有一個性能的

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

這個嘛，行列轉(zhuǎn)換在后端也不是很好解決的問題，而且還有一個性能的問題，綜合考慮，我還是覺得應(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>

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

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

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

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

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

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

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

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

 {
 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，可能會有點(diǎn)問題，所以就加了個標(biāo)識。

對了，可以多一個科目的，比如“物理”，只要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; //動態(tài)列
 }
 //把科目加到th里面 ，動態(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; //動態(tài)列
 }
 this.tableBody = tr;

這個可以寫在 created 里面，當(dāng)然寫在其他地方也可以，只要把數(shù)據(jù)給過去就行。

前面是給了一個測試數(shù)據(jù)，數(shù)據(jù)結(jié)構(gòu)并不僅限于這樣，改成其他的業(yè)務(wù)也是可以的，只需要知道 studentID 是一個標(biāo)識列，確定有多少行。 name 是附帶的，有沒有都行，因?yàn)橛锌赡苤孛圆荒苡胣ame做標(biāo)識，要用學(xué)號。

subject 是負(fù)責(zé)確定要增加多少列的，值相同的放到一列，不同的另起一列。

mark 是每一行的分?jǐn)?shù)，和 subject 是key value的關(guān)系，subject 是key， Mark是value，只不過這個變成了上下關(guān)系。subject在表頭，Mark在body里面。

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

最后效果圖一張