vue 處理表格數據：一行放多個記錄

後端返回的是一條一條的數據，前端需要在一行中顯示三個記錄，並且每列的排序號需要依次排
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行中
效果截圖：