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

                        //判断后端返回数据中数组的长度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]) {

                                        //创建一个对象并添加到新数组中去varobj = 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] == "";

                                        varobj = 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]) {

                                        varobj = Object.assign(this.aa[i].name[x],this.aa[i]);

                                        this.reportExportRun.push(obj);

                                    } else {

                                        this.aa[i].name[x] == "";

                                        varobj = 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);

                            }

                        }

                    }

最后在贴上表格的结构（其实在官网上可以查到）

               

               

               

                   

                   

                   

                   

               

               

                   

                   

                   

               

           

转至：https://www.cnblogs.com/WEB_zhumeng/p/11576943.html