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


Posted in Javascript onAugust 06, 2019

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

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

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实现行列转换的一种方法

总结

以上所述是小编给大家介绍的vue实现行列转换的一种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
微信小程序点餐系统开发常见问题汇总
Aug 06 #Javascript
详解使用WebPack搭建React开发环境
Aug 06 #Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 #Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 #Javascript
angularjs请求数据的方法示例
Aug 06 #Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 #Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 #Javascript
You might like
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
司机岗位职责
2013/11/15 职场文书
工商技校毕业生自荐信
2013/11/15 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
市场拓展计划书
2014/05/03 职场文书
青春奉献演讲稿
2014/05/08 职场文书
低碳环保演讲稿
2014/08/28 职场文书
老公婚前保证书
2015/02/28 职场文书
婚宴父亲致辞
2015/07/27 职场文书
golang中的空接口使用详解
2021/03/30 Python
对Keras自带Loss Function的深入研究
2021/05/25 Python
Python自动化爬取天眼查数据的实现
2021/06/15 Python