三维数组渲染表格

vue 三维数组 渲染table表格

今天在用el-table渲染一个三维数组时，遇到了很多问题，想了很多办法都没解决，最好只好放弃，改用原生标签table进行渲染，如果你们有更好的办法，欢迎沟通交流！

后台数据结构如下：

[
    {
        "user_id": 6, 
        "user_nickname": "木秀于林", 
        "child": [
            {
                "modular_id": 0, 
                "modular_title": "其他事项", 
                "grandson": [
                    {
                        "status": 2, 
                        "task_name": "", 
                        "service_hour": "0.0"
                    }, 
                    {
                        "status": 2, 
                        "task_name": "", 
                        "service_hour": "0.8"
                    }
                ]
            }, 
            {
                "modular_id": 1, 
                "modular_title": "企业设立与控制权", 
                "grandson": [
                    {
                        "status": 3, 
                        "task_name": "公司任务", 
                        "service_hour": "1.0"
                    }, 
                    {
                        "status": 2, 
                        "task_name": "任务名称", 
                        "service_hour": "2.0"
                    }, 
                    {
                        "status": 2, 
                        "task_name": "任务名称", 
                        "service_hour": "1.0"
                    }, 
                    {
                        "status": 2, 
                        "task_name": "转派一下", 
                        "service_hour": "0.0"
                    }, 
                    {
                        "status": 2, 
                        "task_name": "技术测试补充需求", 
                        "service_hour": "0.0"
                    }
                ]
            }, 
            {
                "modular_id": 2, 
                "modular_title": "公司治理1", 
                "grandson": [
                    {
                        "status": 2, 
                        "task_name": "苏三国", 
                        "service_hour": "0.0"
                    }
                ]
            }
        ], 
        "rowspan": 8
    }, 
    {
        "user_id": 11, 
        "user_nickname": "用户222", 
        "child": [
            {
                "modular_id": 0, 
                "modular_title": "其他事项", 
                "grandson": [
                    {
                        "status": 2, 
                        "task_name": "", 
                        "service_hour": "0.0"
                    }, 
                    {
                        "status": 2, 
                        "task_name": "", 
                        "service_hour": "0.0"
                    }, 
                    {
                        "status": 3, 
                        "task_name": "", 
                        "service_hour": "0.0"
                    }, 
                    {
                        "status": 3, 
                        "task_name": "", 
                        "service_hour": "0.0"
                    }, 
                    {
                        "status": 1, 
                        "task_name": "", 
                        "service_hour": "0.0"
                    }, 
                    {
                        "status": 1, 
                        "task_name": "", 
                        "service_hour": "0.0"
                    }
                ]
            }
        ], 
        "rowspan": 6
    }, 
    {
        "user_id": 4417, 
        "user_nickname": "用户20536", 
        "child": [
            {
                "modular_id": 0, 
                "modular_title": "其他事项", 
                "grandson": [
                    {
                        "status": 2, 
                        "task_name": "", 
                        "service_hour": "0.0"
                    }, 
                    {
                        "status": 2, 
                        "task_name": "", 
                        "service_hour": "0.0"
                    }, 
                    {
                        "status": 2, 
                        "task_name": "", 
                        "service_hour": "0.0"
                    }
                ]
            }
        ], 
        "rowspan": 3
    }, 
    {
        "user_id": 4436, 
        "user_nickname": "用户68073", 
        "child": [
            {
                "modular_id": 0, 
                "modular_title": "其他事项", 
                "grandson": [
                    {
                        "status": 2, 
                        "task_name": "", 
                        "service_hour": "0.0"
                    }, 
                    {
                        "status": 2, 
                        "task_name": "", 
                        "service_hour": "0.0"
                    }, 
                    {
                        "status": 2, 
                        "task_name": "", 
                        "service_hour": "0.0"
                    }
                ]
            }
        ], 
        "rowspan": 3
    }, 
    {
        "user_id": 4439, 
        "user_nickname": "顶呱呱企业", 
        "child": [
            {
                "modular_id": 2, 
                "modular_title": "公司治理1", 
                "grandson": [
                    {
                        "status": 2, 
                        "task_name": "超级龙珠", 
                        "service_hour": "0.0"
                    }
                ]
            }
        ], 
        "rowspan": 1
    }
]

首先需要对后台数据进行处理，入参data为后台返回数据

/**
	* @description: 处理数据2.0
	* @return {*}
	*/
    handleData(data){
		const newData = data.map(item => {
			let rows = 0
			item.child.forEach(item2 => {
				rows += item2.grandson.length
			})
			item.rowspan = rows
			return item
		})
		var mydata = new Array
		newData.forEach((projectItem) => {
		    projectItem.child.forEach((modelItem, modelIndex) => {
		        modelItem.grandson.forEach((taskItem, taskIndex) => {
		            if (modelIndex === 0 && taskIndex === 0) {
		                mydata.push({
		                        rowspan1: projectItem.rowspan,
		                        user_nickname: projectItem.user_nickname,
		                        rowspan2: modelItem.grandson.length,
		                        modular_title: modelItem.modular_title,
		                        ...taskItem
		                    }
		                )
		            } else if (taskIndex === 0) {
		                mydata.push({
		                    rowspan2: modelItem.grandson.length,
		                    modular_title: modelItem.modular_title,
		                    ...taskItem
		                    }
		                )
		            } else {
		                mydata.push(taskItem)
		            }
		        })
		    })
		})
		return mydata
	}

下面直接拿处理好的数据进行渲染就行了

<table  cellspacing="0" class="customTable">
		  <thead>
			  <tr>
				  <th>企业名称</th>
				  <th>服务模块</th>
				  <th>具体任务</th>
				  <th>服务状态</th>
				  <th>服务时长</th>
			  </tr>
		  </thead>
	      <tr v-for="(item,itemIndex) in tableData" :key="itemIndex">
	          <td align="center" v-if="item.user_nickname" :rowspan="item.rowspan1">
	              {{item.user_nickname}}
	          </td>
	          <td align="center" v-if="item.modular_title" :rowspan="item.rowspan2">
	              {{item.modular_title}}
	          </td>
	          <td align="center">{{item.task_name}}</td>
	          <td align="center">{{item.status | filterServeStatus}}</td>
	          <td align="center">{{item.service_hour}}</td>
	      </tr>
	  </table>

最终实现效果如下