目标效果
原始数据
{ "data": [ { "projectName": "项目一", "model": [ { "modelName": "博客", "task": [ { "taskName": "任务一", "completeRate": "34%" }, { "taskName": "任务二", "completeRate": "50%" }, { "taskName": "任务三", "completeRate": "80%" } ] }, { "modelName": "相册", "task": [ { "taskName": "任务一", "completeRate": "50%" }, { "taskName": "任务二", "completeRate": "14%" }, { "taskName": "任务三", "completeRate": "62%" } ] } ] } ] }
实现思路
1. 因存在单元格合并，需对原始数据进行处理，获取到具体的合并行数
2. 原始数据层次太多，是复杂的多维数组，需遍历重构成一维数组
核心代码
先获取合并行数，res.data为从后台获取的原始数据
let data = res.data.map(item => { let rows = 0 item.model.forEach(item2 => { rows += item2.task.length }) item.rowspan = rows return item })
再将多维数组，降维为一维数组
this.mydata = [] data.forEach((projectItem) => { projectItem.model.forEach((modelItem, modelIndex) => { modelItem.task.forEach((taskItem, taskIndex) => { if (modelIndex === 0 && taskIndex === 0) { this.mydata.push({ rowspan1: projectItem.rowspan, projectName: projectItem.projectName, rowspan2: modelItem.task.length, modelName: modelItem.modelName, ...taskItem } ) } else if (taskIndex === 0) { this.mydata.push({ rowspan2: modelItem.task.length, modelName: modelItem.modelName, ...taskItem } ) } else { this.mydata.push(taskItem) } }) }) })
此时this.mydata的数据内容为：
[ { "rowspan1": 6, "projectName": "项目一", "rowspan2": 3, "modelName": "博客", "taskName": "任务一", "completeRate": "34%" }, { "taskName": "任务二", "completeRate": "50%" }, { "taskName": "任务三", "completeRate": "80%" }, { "rowspan2": 3, "modelName": "相册", "taskName": "任务一", "completeRate": "50%" }, { "taskName": "任务二", "completeRate": "14%" }, { "taskName": "任务三", "completeRate": "62%" } ]
最终用v-for渲染即可
<table border="1" cellspacing="0"> <tr> <th>项目名称</th> <th>模块名称</th> <th>任务名称</th> <th>完成进度</th> </tr> <tr v-for="(item,itemIndex) in mydata" :key="itemIndex"> <td v-if="item.projectName" :rowspan="item.rowspan1"> {{item.projectName}} </td> <td v-if="item.modelName" :rowspan="item.rowspan2"> {{item.modelName}} </td> <td>{{item.taskName}}</td> <td>{{item.completeRate}}</td> </tr> </table>
