一种利用vue实现行列转换的方法

职级变动是个老掉牙的问题，这几天逛知乎也遇到过。一个前端说得到的数据是单列的，需要转换后才能绑定。花了很长时间才修好。还说后端要直接输出数据，前端不要甩。

嗯，行列转换在后端不是一个好解决的问题，还有一个性能问题。综合考虑，我还是认为应该在前端进行行列转换。只是说说而已，不练招数，所以拿出代码作为参考。如果有更好的方法，欢迎大家一起讨论。

1.模板设计。

div id=' app ' table class=' table _ default 1 ' style=' width : 400 px；'tr th v-for=' tableHeader中的项' {item}}/th/tr tr v-for='表体中的tr ' TD v-for=' tr中的TD ' { TD } }/TD/tr/table/div这个比较简单。首先，遍历表头以循环出头。

然后，在双遍历中，tableBody提供行数据，然后遍历td。

没有与业务逻辑相关的代码，这意味着这个模板可以满足任何行列转换的要求。可以绑定m行n列的表。

2.然后是vue实例部分

varform=new vue({ El : ' # app }，data: { tableheader: {，//bind header tablebody : { }//bind data }，created: function () {//代码如下})；这里数据的两个成员是空的，因为它的结构是根据后台传来的数据确定的，所以这里就不写了。当然要先写tableHeader和tableBody才能占据位置，否则模板写不出来。

但是，先写一个结构引用，否则下面的代码估计会看起来晕头转向

2.1表头的结构。这很简单。

{name:' Name '，studentID:' Student ID '，' Mathematics' :' Mathematics '，' Physics' :' Physics '，' English' :' English '，' Chinese' :' Chinese '，}2.2 tableBody结构。这里不使用数组，因为数组不容易定位，而且可以通过按键轻松定位。键值的规则是识别学生编号，例如s1。作为一把钥匙，可能会有一些问题，所以加了一个logo。

对了，你还可以多一个科目，比如“物理”，只要在tableHeader里面就行。

{s1: {studentid: 1，姓名：' Xiaohong '，数学： 200，语文： 190，英语： 191 } S 2: { studentid : 2，姓名3360' Xiaoming '，数学： 193，语文： 187，英语： 188，物理： 99 } S : {最后，转换函数

//获取测试数据var测试数据=[{studentid: 0001，名称： '小红'，科目： '数学'，标记： 100}，{studentid: 0001，名称： '小红'，科目： '中文'，标记： 90}，{学生证： 0001，名称3360 '小红'，科目3360 '英语'，标记3360 姓名3360 '小明'，科目： '物理'，标记： 88}，{学号： 0003，姓名3360 '韩梅梅'，科目： '数学'，标记： 94}，{学号： 0003，姓名3360 '韩梅梅'，科目3360 '中文'，标记： 99}，{学号： 0003，姓名3360 ' //对于第一次遍历，使表头var th={ } th[' student id ']=' student id '；//固定列th[' name ']=' name '；//为(var i=0)筛选帐户var THkey={ }；i testdata.lengthi ) { thKey[testdata[i]。subject]=1；//动态列}//向th添加账户，动态添加(thKey中的var key){ th[key]=key的列；} this.tableHeader=th//第二次遍历，使线var tr={ }；for(var I=0；i testdata.lengthI){ var d=test data[I]；tr[' s ' d . studentid]={ studentid :d。studentid，//固定列名3360d。name } }//对于第三次遍历，添加主题的得分为(var I=0；i testdata.lengthI){ var d=test data[I]；tr[' s ' d . studentid][d . subject]=d . mark 100；//动态列} this.tableBody=tr这个可以写在created，当然也可以写在其他地方，只是把数据给传过去。

前面给出了一个测试数据。数据结构不限于此。也可以换成其他服务。您只需要知道studentID是一个标识列，并确定有多少行。名字是伴随而来的，不管你有没有，因为有可能同名同姓，所以不能用名字作为标识，而要用学号。

主题负责确定要添加多少列。值相同的放在一列，值不同的放在另一列。

记号是每一行的分数，与主语的关系是关键值，主语是关键，记号是值，但这就变成了上下关系。主题在标题，马克在正文。

自我感觉笔记还可以。如果你什么都不懂，欢迎讨论。

最终呈现

摘要

以上是vue实现边肖介绍的职级转换的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！