后端返回的是一条一条的数据,前端需要在一行中显示三个记录,并且每列的排序号需要依次排
table代码:
<table class="t4" border="1" cellpadding="1" cellspacing="1" align="center" style="width:100%;">
<tr>
<th align="center" width=70> 序 号 </th>
<th align="center" width=110> 学 号 </th>
<th align="center" width=70> 姓 名 </th>
<th align="center" width=70> 性 别 </th>
<th align="center"> 备 注 </th>
<th align="center" width=70> 序 号 </th>
<th align="center" width=110> 学 号 </th>
<th align="center" width=70> 姓 名 </th>
<th align="center" width=70> 性 别 </th>
<th align="center"> 备 注 </th>
<th align="center" width=70> 序 号 </th>
<th align="center" width=110> 学 号 </th>
<th align="center" width=70> 姓 名 </th>
<th align="center" width=70> 性 别 </th>
<th align="center"> 备 注 </th>
</tr>
<tr v-for="(stu,index) in row.stus">
<td align="center">{
{stu.rowid}}</td>
<td align="center">{
{stu.stid}}</td>
<td align="center">{
{stu.name}}</td>
<td align="center">{
{stu.sex}}</td>
<td>{
{stu.remark}}</td>
<td align="center">{
{stu.rowid1}}</td>
<td align="center">{
{stu.stid1}}</td>
<td align="center">{
{stu.name1}}</td>
<td align="center">{
{stu.sex1}}</td>
<td>{
{stu.remark1}}</td>
<td align="center">{
{stu.rowid2}}</td>
<td align="center">{
{stu.stid2}}</td>
<td align="center">{
{stu.name2}}</td>
<td align="center">{
{stu.sex2}}</td>
<td>{
{stu.remark2}}</td>
</tr>
</table>
整理数据的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行中
效果截图: