溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
行列轉換是一個老生常談的問題，這幾天逛知乎有遇到了這個問題。一個前端說，拿到的數據是單列的需要做轉換才能夠綁定，折騰了好久才搞定，還說這個應該后端直接出數據，不應該讓前端折騰。
這個嘛，行列轉換在后端也不是很好解決的問題，而且還有一個性能的問題，綜合考慮，我還是覺得應該由前端進行行列轉換。光說不練假把式，所以拿出來代碼僅作為拋磚引玉，供大家參考一下，如果有更好的方法，歡迎一起來探討。
1、模板設計。
<div id="app">
<table class="table_default1" >
<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 把表頭循環出來。
然后在雙重遍歷，tableBody 提供行數據，然后在遍歷出來td。
這里沒有任何與業務邏輯相關的代碼，也就是說這個模板可以適合任何行列轉換的需求。可以綁定出來 m行n列 的表格。
2、然后是vue實例部分
var form = new Vue({
el: "#app",
data: {
tableHeader: { }, //綁定表頭
tableBody: { } //綁定數據
},
created: function () {
//代碼在下面
}
});
這里data的兩個成員都是空的，因為其結構要根據后臺傳遞過來的數據決定，所以這里就不寫了，當然 tableHeader 和 tableBody 還是要先寫一下占個位置，否則模板的地方就沒法寫了。
不過還是先寫一個結構參考一下，否則下面的代碼估計看著會比較暈
2.1 tableHeader 的結構。這個很簡單了。
{
name: "姓名",
studentID: "學號",
"數學": "數學",
"物理": "物理",
"英語": "英語",
"語文": "語文",
}
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、最后是轉換函數
//得到測試數據
var testdata = [
{
studentID: 0001,
name: '小紅',
subject: '數學',
mark: 100
}, {
studentID: 0001,
name: '小紅',
subject: '語文',
mark: 90
}, {
studentID: 0001,
name: '小紅',
subject: '英語',
mark: 91
}, {
studentID: 0002,
name: '小明',
subject: '數學',
mark: 93
}, {
studentID: 0002,
name: '小明',
subject: '語文',
mark: 87
}, {
studentID: 0002,
name: '小明',
subject: '英語',
mark: 88
}, {
studentID: 0002,
name: '小明',
subject: '物理',
mark: 88
}, {
studentID: 0003,
name: '韓梅梅',
subject: '數學',
mark: 94
}, {
studentID: 0003,
name: '韓梅梅',
subject: '語文',
mark: 99
}, {
studentID: 0003,
name: '韓梅梅',
subject: '英語',
mark: 98
}
];
//第一次遍歷，制作 tableHeader
var th = {}
th["studentID"] = '學號'; //固定列
th["name"] = '姓名';
//篩選科目
var thKey = {}
for (var i = 0; i < testdata.length; i++) {
thKey[testdata[i].subject] = 1; //動態列
}
//把科目加到th里面 ，動態增加列
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; //動態列
}
this.tableBody = tr;
這個可以寫在 created 里面，當然寫在其他地方也可以，只要把數據給過去就行。
前面是給了一個測試數據，數據結構并不僅限于這樣，改成其他的業務也是可以的，只需要知道 studentID 是一個標識列，確定有多少行。 name 是附帶的，有沒有都行，因為有可能重名，所以不能用name做標識，要用學號。
subject 是負責確定要增加多少列的，值相同的放到一列，不同的另起一列。
mark 是每一行的分數，和 subject 是key value的關系，subject 是key， Mark是value，只不過這個變成了上下關系。subject在表頭，Mark在body里面。
自我感覺注釋寫的還算可以的。如果有看不明白的，歡迎討論。
最后效果圖一張
總結
以上所述是小編給大家介紹的vue實現行列轉換的一種方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
