最近在做项目遇见了一个后端返回数据结构跟前端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);
}
}
}
最后在贴上表格的结构（其实在官网上可以查到）
<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>
