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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
符合标准的js表单提交的代码
Sep 13 Javascript
FF IE兼容性的修改小结
Sep 02 Javascript
javascript实现yield的方法
Nov 06 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 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
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
python发送邮件实例分享
2017/07/28 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python 获取url中的参数列表实例
2018/12/18 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
个人房屋买卖协议书(范本)
2014/10/04 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
《比的意义》教学反思
2016/02/18 职场文书
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android