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>