行列转换是一个老生常谈的问题,这几天逛知乎有遇到了这个问题。一个前端说,拿到的数据是单列的需要做转换才能够绑定,折腾了好久才搞的定,还说这个应该后端直接出数据,不应该让前端折腾。
这个嘛,行列转换在后端也不是很好解决的问题,而且还有一个性能的问题,综合考虑,我还是觉得应该由前端进行行列转换。光说不练假把式,所以拿出来代码仅作为抛砖引玉,供大家参考一下,如果有更好的方法,欢迎一起来探讨。
& lt; div id=坝τ谩北?
& lt;表类=皌able_default1”比;
& lt; tr>
& lt; th)=皌ableHeader项目”在
{{项}}
& lt;/th>
& lt;/tr>
& lt; tr v=皌ableBody tr”比;
tr & lt; td)=皌d”比;
{{td}}
& lt;/td>
& lt;/tr>
& lt;/table>
& lt;/div>
这个比较简单,先遍历tableHeader ,,把表头循环出来。
然后在双重遍历,tableBody提供行数据,然后在遍历出来td。
这里没有任何与业务逻辑相关的代码,也就是说这个模板可以适合任何行列转换的需求。可以绑定出来m行n列,的表格。
Vue ({var=新形式
埃尔:“#应用”,
数据:{
tableHeader:{},//绑定表头
tableBody:{}//绑定数据
},
创建:函数(){//代码在下面
}
});
这里数据的两个成员都是空的,因为其结构要根据后台传递过来的数据决定,所以这里就不写了,当然tableHeader和tableBody还是要先写一下占个位置,否则模板的地方就没法写了
。
不过还是先写一个结构参考一下,否则下面的代码估计看着会比较晕
<强> 2.1,tableHeader 的结构,这个很简单了。
{
名称:“姓名”,
studentID:“学号”,
“数学”:“数学”,
“物理”:“物理”,
“英语”:“英语”,
“语文”:“语文”,
}
2.2,tableBody 的结构。这里并没有使用数组,因为数组不好定位,用关键的方式可以很方便的定位,键值的规律就是标识+学号,比如s1。纯数字作为关键,可能会有点问题,所以就加了个标识。
对了,可以多一个科目的,比如“物理”,只要tableHeader里面有就可以。
{
s1: {
studentID: 1、
的名字:“小红”,
数学:200
语文:190,
英语:191
}
s2: {
studentID: 2
的名字:“小明”,
数学:193
语文:187,
英语:188,
物理:99
}
s3: {
studentID: 3,
名称:“韩梅梅”,
数学:194
语文:199,
英语:198
}
}
3,最后是转换函数
//得到测试数据
var testdata=https://www.yisu.com/zixun/[
{
studentID: 0001,
的名字:“小红”,
主题:“数学”,
马克:100
}, {
studentID: 0001,
的名字:“小红”,
主题:“语文”,
马克:90
}, {
studentID: 0001,
的名字:“小红”,
主题:“英语”,
马克:91
}, {
studentID: 0002,
的名字:“小明”,
主题:“数学”,
马克:93
}, {
studentID: 0002,
的名字:“小明”,
主题:“语文”,
马克:87
}, {
studentID: 0002,
的名字:“小明”,
主题:“英语”,
马克:88
}, {
studentID: 0002,
的名字:“小明”,
主题:“物理”,
马克:88
}, {
studentID: 0003,
名称:“韩梅梅”,
主题:“数学”,
马克:94
}, {
studentID: 0003,
名称:“韩梅梅”,
主题:“语文”,
马克:99
}, {
studentID: 0003,
名称:“韩梅梅”,
主题:“英语”,
马克:98
}
];//第一次遍历,制作tableHeader
var th={}
th (“studentID”)='学号”;//固定列
th(“名字”)='姓名”;//筛选科目
var thKey={}
(var=0;我& lt;testdata.length;我+ +){
thKey [testdata[我]。主题]=1;//动态列
}//把科目加到th里面,动态增加列
(var关键thKey) {
th(例子)=关键;
}
这一点。tableHeader=th;//第二次遍历,制作tr的行
var tr={};
(var=0;我& lt;testdata.length;我+ +){
var d=testdata[我];
tr (s + d。studentID]={
studentID: d。studentID,//固定列
名称:d.name
}
}//第三次遍历,添加科目的成绩
(var=0;我& lt;testdata.length;我+ +){
var d=testdata[我];
tr (s + d.studentID] (d。主题]=d。马克+ 100;//动态列
}
这一点。tableBody=tr;
