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

网络编程 2025/11/9 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

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

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

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,行列转换

标签：

vue,行列转换

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“vue实现行列转换的一种方法”

暂无vue实现行列转换的一种方法的评论...

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

vue,行列转换

Vue路由前后端设计总结

微信小程序点餐系统开发常见问题汇总

评论“vue实现行列转换的一种方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接