博客
关于我
vue 处理表格数据:一行放多个记录
阅读量:235 次
发布时间:2019-03-01

本文共 3818 字,大约阅读时间需要 12 分钟。

后端返回的是一条一条的数据,前端需要在一行中显示三个记录,并且每列的排序号需要依次排

table代码:

序 号 学 号 姓 名 性 别 备 注 序 号 学 号 姓 名 性 别 备 注 序 号 学 号 姓 名 性 别 备 注
{ {stu.rowid}} { {stu.stid}} { {stu.name}} { {stu.sex}} { {stu.remark}} { {stu.rowid1}} { {stu.stid1}} { {stu.name1}} { {stu.sex1}} { {stu.remark1}} { {stu.rowid2}} { {stu.stid2}} { {stu.name2}} { {stu.sex2}} { {stu.remark2}}

整理数据的js代码:

res.data.rows.forEach(row => {                            row.stus = [];                            var split = parseInt(row.stulist.length / 3);                            if (row.stulist.length % 3 > 0) {                                split++;                            }                            for (var j = 0; j < split; j++) {                                var sturow = {};                                for (var i = 0; i < 3; i++) {                                    var index = i * split + j;                                    var crow = row.stulist[index];                                    if (crow) {                                        switch (i) {                                            case 0:                                                sturow.rowid = crow.rowid;                                                sturow.stid = crow.stid;                                                sturow.name = crow.name;                                                sturow.sex = crow.sex;                                                sturow.remark = crow.remark;                                                break;                                            case 1:                                                sturow.rowid1 = crow.rowid;                                                sturow.stid1 = crow.stid;                                                sturow.name1 = crow.name;                                                sturow.sex1 = crow.sex;                                                sturow.remark1 = crow.remark;                                                break;                                            case 2:                                                sturow.rowid2 = crow.rowid;                                                sturow.stid2 = crow.stid;                                                sturow.name2 = crow.name;                                                sturow.sex2 = crow.sex;                                                sturow.remark2 = crow.remark;                                                break;                                        }                                    }                                }                                row.stus.push(sturow);                            }                            that.table.data.push(row);                        });

使用嵌套循环,计算出下一个索引,取出记录,拼出一条数据,绑定到table行中

效果截图:
在这里插入图片描述

转载地址:http://garv.baihongyu.com/

你可能感兴趣的文章
MYSQL:基础——触发器
查看>>
Mysql:连接报错“closing inbound before receiving peer‘s close_notify”
查看>>
mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
查看>>
mysqldump 参数--lock-tables浅析
查看>>
mysqldump 导出中文乱码
查看>>
mysqldump 导出数据库中每张表的前n条
查看>>
mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
查看>>
Mysqldump参数大全(参数来源于mysql5.5.19源码)
查看>>
mysqldump备份时忽略某些表
查看>>
mysqldump实现数据备份及灾难恢复
查看>>
mysqldump数据库备份无法进行操作只能查询 --single-transaction
查看>>
mysqldump的一些用法
查看>>
mysqli
查看>>
MySQLIntegrityConstraintViolationException异常处理
查看>>
mysqlreport分析工具详解
查看>>
MySQLSyntaxErrorException: Unknown error 1146和SQLSyntaxErrorException: Unknown error 1146
查看>>
Mysql_Postgresql中_geometry数据操作_st_astext_GeomFromEWKT函数_在java中转换geometry的16进制数据---PostgreSQL工作笔记007
查看>>
mysql_real_connect 参数注意
查看>>
mysql_secure_installation初始化数据库报Access denied
查看>>
MySQL_西安11月销售昨日未上架的产品_20161212
查看>>