vue 复杂表格的遍历渲染

目标效果

原始数据

{
  "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>