vue表格多級列表嵌套數據

最近在做項目遇見了一個后端返回數據結構跟前端element中的多級列表數據結構相似、但是在官網上沒看見相類似的案例  就自己寫了個   做個記錄

后端返回數據結構如下：

aa: [{
                        bankNumbering: '1',
                        bankName: '名稱一',
                        call: [{
                                alarmTime: '2019-08-15',
                                alarmDesc: '實打實大所多',
                                lastUserName: '大颯颯',
                                failureRemark: '士大夫撒旦個'
                            },
                            {
                                alarmTime: '2019-08-16',
                                alarmDesc: '發給對方公司',
                                lastUserName: '電風扇',
                                failureRemark: '士大夫柔荑花'
                            }
                        ],
                        name: [{
                                aalarmTime: '2019-08-31',
                                aalarmDesc: '實打實',
                                alastUserName: '東方阿薩德',
                            }
                        ]
                    },
                    {
                        bankNumbering: '2',
                        bankName: '名稱二',
                        call:[],
                        name:[
                            {
                                aalarmTime: '2019-08-30',
                                aalarmDesc: 'aaaaaaaaa',
                                alastUserName: '東方閃電',
                            }
                        ]
                    },
                    {
                        bankNumbering: '3',
                        bankName: '名稱三',
                        call:[],
                        name:[]
                    }]

前端頁面展示效果:

出現的問題就在於：后端返回數據中的數組不能夠直接放進表格中，需要先轉一到數據，將數據中數組的數據轉到外層來，在進行調用即可完成。

話不多說-直接上代碼

for(let i = 0; i < this.aa.length; i++) {
                        //判斷后端返回數據中數組的長度
                        let calength = this.aa[i].call.length;
                        let namelength = this.aa[i].name.length;
                        console.log(calength);
                        //將長度進行比較
                        if(calength >= namelength) {
                            if(calength != 0) {
                                //循環數據並創建新的數組用來接收
                                for(let x = 0; x < calength; x++) {
                                    if(this.aa[i].name[x]) {
                                        //創建一個對象並添加到新數組中去
                                        var obj = Object.assign(this.aa[i].call[x], this.aa[i].name[x], this.aa[i]);
                                        this.reportExportRun.push(obj);
                                    } else {
                                        this.aa[i].name[x] == "";
                                        var obj = Object.assign(this.aa[i].call[x], this.aa[i].name[x], this.aa[i]);
                                        this.reportExportRun.push(obj);
                                    }
                                }
                            
                            }else{
                                //這一步是（數組的長度為零時就將外層數據添加到新數組中去）
                              let obj = Object.assign(this.aa[i]);
                              this.reportExportRun.push(obj);
                            }
                            console.log(this.reportExportRun)
                        }else{
                            if(namelength != 0) {
                                for(let x = 0; x < namelength; x++) {
                                    if(this.aa[i].name[x]) {
                                        var obj = Object.assign(this.aa[i].name[x], this.aa[i]);
                                        this.reportExportRun.push(obj);
                                    } else {
                                        this.aa[i].name[x] == "";
                                        var obj = Object.assign(this.aa[i].name[x], this.aa[i]);
                                        this.reportExportRun.push(obj);
                                    }
                                }
                            }else{
                              let obj = Object.assign(this.aa[i]);
                              this.reportExportRun.push(obj);
                            }
                        }
                    }

最后在貼上表格的結構（其實在官網上可以查到）

<el-table :data="reportExportRun">
                <el-table-column prop="bankNumbering" label="網點編號"></el-table-column>
                <el-table-column prop="bankName" label="網點名稱"></el-table-column>
                <el-table-column label="報警詳情" width="400px">
                    <el-table-column prop="alarmTime" label="報警時間"></el-table-column>
                    <el-table-column prop="alarmDesc" label="報警內容"></el-table-column>
                    <el-table-column prop="lastUserName" label="核實人員"></el-table-column>
                    <el-table-column prop="failureRemark" label="報警結果"></el-table-column>
                </el-table-column>
                <el-table-column label="故障詳情">
                    <el-table-column prop="aalarmTime" label="發生時間"></el-table-column>
                    <el-table-column prop="aalarmDesc" label="恢復時間"></el-table-column>
                    <el-table-column prop="alastUserName" label="故障原因描述"></el-table-column>
                </el-table-column>
            </el-table>

 

如果各位好友還有更簡單的方法請告知一聲，感謝！！！