华山资源网

vue实现行列转换的一种方法
网络编程 2024/12/27 佚名
3 1

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

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

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实现行列转换的一种方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com