侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 4年前   294

行列转换是一个老生常谈的问题,这几天逛知乎有遇到了这个问题。一个前端说,拿到的数据是单列的需要做转换才能够绑定,折腾了好久才搞定,还说这个应该后端直接出数据,不应该让前端折腾。

这个嘛,行列转换在后端也不是很好解决的问题,而且还有一个性能的问题,综合考虑,我还是觉得应该由前端进行行列转换。光说不练假把式,所以拿出来代码仅作为抛砖引玉,供大家参考一下,如果有更好的方法,欢迎一起来探讨。

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实现二级菜单内容转换


  • 上一条:
    vue-cli3+typescript新建一个项目的思路分析
    下一条:
    Vue Element UI + OSS实现上传文件功能
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客