vue实现行列转换的一种方法
行列转换是一个老生常谈的问题，这几天逛知乎有遇到了这个问题。一个前端说，拿到的数据是单列的需要做转换才能够绑定，折腾了好久才搞定，还说这个应该后端直接出数据，不应该让前端折腾。
这个嘛，行列转换在后端也不是很好解决的问题，而且还有一个性能的问题，综合考虑，我还是觉得应该由前端进行行列转换。光说不练假把式，所以拿出来代码仅作为抛砖引玉，供大家参考一下，如果有更好的方法，欢迎一起来探讨。
1、模板设计。
<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 把表头循环出来。
然后在双重遍历，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实现行列转换的一种方法,希望对大家有所帮助