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>

 

如果各位好友还有更简单的方法请告知一声，感谢！！！