vue实现行列转换的一种方法
前端  /  管理员 发布于 4年前   292
行列转换是一个老生常谈的问题,这几天逛知乎有遇到了这个问题。一个前端说,拿到的数据是单列的需要做转换才能够绑定,折腾了好久才搞定,还说这个应该后端直接出数据,不应该让前端折腾。
这个嘛,行列转换在后端也不是很好解决的问题,而且还有一个性能的问题,综合考虑,我还是觉得应该由前端进行行列转换。光说不练假把式,所以拿出来代码仅作为抛砖引玉,供大家参考一下,如果有更好的方法,欢迎一起来探讨。
1、模板设计。
{{item}} {{td}} 这个比较简单,先遍历 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实现行列转换的一种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!您可能感兴趣的文章:
- vue+element创建动态的form表单及动态生成表格的行和列
- vue通过滚动行为实现从列表到详情,返回列表原位置的方法
- vue.js删除列表中的一行
- 详解vue2.0 不同屏幕适配及px与rem转换问题
- 使用Vue开发一个实时性时间转换指令
- Vue.js实现网格列表布局转换方法
- Vue网页html转换PDF(最低兼容ie10)的思路详解
- Vue.js对象转换实例
- vue.js将unix时间戳转换为自定义时间格式
- 利用vue-router实现二级菜单内容转换
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号