zoukankan      html  css  js  c++  java
  • 使用vue实现行列转换的一种方法。

      

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

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

      1、模板设计。

      

     1 <div id="app">
     2     <table class="table_default1" style=" 400px;">
     3         <tr>
     4             <th v-for="item in tableHeader">
     5                 {{item}} 
     6             </th>
     7         </tr>
     8         <tr v-for="tr in tableBody">
     9             <td v-for="td in tr">
    10                 {{td}}
    11             </td>
    12         </tr>
    13     </table>
    14 </div>

      这个比较简单,先遍历 tableHeader    把表头循环出来。

      然后在双重遍历,tableBody 提供行数据,然后在遍历出来td。

      这里没有任何与业务逻辑相关的代码,也就是说这个模板可以适合任何行列转换的需求。可以绑定出来 m行n列 的表格。

      2、然后是vue实例部分  

     1 var form = new Vue({
     2         el: "#app",
     3         data: {
     4             tableHeader: {  }, //绑定表头
     5             tableBody: { } //绑定数据
     6         },
     7         created: function () {
     8            //代码在下面
     9         }
    10     });

      这里data的两个成员都是空的,因为其结构要根据后台传递过来的数据决定,所以这里就不写了,当然 tableHeader 和 tableBody 还是要先写一下占个位置,否则模板的地方就没法写了。

      不过还是先写一个结构参考一下,否则下面的代码估计看着会比较晕

      2.1  tableHeader  的结构。这个很简单了。

    1 {
    2     name: "姓名",
    3     studentID: "学号",
    4     "数学": "数学",
    5     "物理": "物理",
    6     "英语": "英语",
    7     "语文": "语文",
    8 }

      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、最后是转换函数

     1  //得到测试数据
     2             var testdata = [
     3                 {
     4                     studentID: 0001,
     5                     name: '小红',
     6                     subject: '数学',
     7                     mark: 100
     8                 }, {
     9                     studentID: 0001,
    10                     name: '小红',
    11                     subject: '语文',
    12                     mark: 90
    13                 }, {
    14                     studentID: 0001,
    15                     name: '小红',
    16                     subject: '英语',
    17                     mark: 91
    18                 }, {
    19                     studentID: 0002,
    20                     name: '小明',
    21                     subject: '数学',
    22                     mark: 93
    23                 }, {
    24                     studentID: 0002,
    25                     name: '小明',
    26                     subject: '语文',
    27                     mark: 87
    28                 }, {
    29                     studentID: 0002,
    30                     name: '小明',
    31                     subject: '英语',
    32                     mark: 88
    33                 }, {
    34                     studentID: 0002,
    35                     name: '小明',
    36                     subject: '物理',
    37                     mark: 88
    38                 }, {
    39                     studentID: 0003,
    40                     name: '韩梅梅',
    41                     subject: '数学',
    42                     mark: 94
    43                 }, {
    44                     studentID: 0003,
    45                     name: '韩梅梅',
    46                     subject: '语文',
    47                     mark: 99
    48                 }, {
    49                     studentID: 0003,
    50                     name: '韩梅梅',
    51                     subject: '英语',
    52                     mark: 98
    53                 }
    54             ];
    55 
    56             //第一次遍历,制作 tableHeader
    57             var th = {}
    58             th["studentID"] = '学号';  //固定列
    59             th["name"] = '姓名';
    60 
    61             //筛选科目
    62             var thKey = {}
    63             for (var i = 0; i < testdata.length; i++) {
    64                 thKey[testdata[i].subject] = 1;  //动态列
    65             }
    66 
    67             //把科目加到th里面 ,动态增加列
    68             for (var key in thKey) {
    69                 th[key] = key;
    70             }
    71 
    72             this.tableHeader = th;
    73 
    74             //第二次遍历,制作tr的行
    75             var tr = {};
    76             for (var i = 0; i < testdata.length; i++) {
    77                 var d = testdata[i];
    78                 tr['s' + d.studentID] = {
    79                     studentID: d.studentID, //固定列
    80                     name: d.name
    81                 }
    82             }
    83             //第三次遍历,添加科目的成绩
    84             for (var i = 0; i < testdata.length; i++) {
    85                 var d = testdata[i];
    86                 tr['s' + d.studentID][d.subject] = d.mark + 100;  //动态列
    87             }
    88 
    89             this.tableBody = tr;

      这个可以写在 created 里面,当然写在其他地方也可以,只要把数据给过去就行。

      前面是给了一个测试数据,数据结构并不仅限于这样,改成其他的业务也是可以的,只需要知道 studentID 是一个标识列,确定有多少行。 name 是附带的,有没有都行,因为有可能重名,所以不能用name做标识,要用学号。

      subject 是负责确定要增加多少列的,值相同的放到一列,不同的另起一列。

      mark 是每一行的分数,和 subject 是key value的关系,subject 是key, Mark是value,只不过这个变成了上下关系。subject在表头,Mark在body里面。

      自我感觉注释写的还算可以的。如果有看不明白的,欢迎讨论。

      最后效果图一张

      

  • 相关阅读:
    MD代码块指定语言类型
    spring通过bean名称,方法名,反射调用服务。
    h5魔塔开坑记
    意识流CSP2021游记
    Android开发byte version = 0x80错误: 不兼容的类型: 从int转换到byte可能会有损失
    Installed Build Tools revision 31.0.0 is corrupted. Remove and install again using the SDK Manager解决方法
    Android开发androidstudio调试smali代码
    Android开发修改手机ro.debuggable=1便于调试应用程序
    window环境下载Android系统源代码的方法
    android开发jni开发遍历文件夹下的文件以及目录
  • 原文地址:https://www.cnblogs.com/jyk/p/11308638.html
Copyright © 2011-2022 走看看