vue+element 生成table

Question

根据数据格式用 vue+element 生成table生成如图的表格

    const staffMessageList = [
        {
            "auditProjectBelongStaff": [
                {
                    "assessmentScore": -1,
                    "assessmentScoreStr": "无法统计",
                    "mutualEvaluationScore": "1.00",
                    "mutualEvaluationScoreDetailsList": [
                        [
                            "小明",
                            "组员",
                            "优"
                        ]
                    ],
                    "projectName": "213123123",
                    "projectRole": "组长",
                    "projectScore": {
                        "appraiseBatchsId": null,
                        "checkHandlerTime": null,
                        "checkStatus": null,
                        "completeScore": -1,
                        "completeScoreStr": "无法统计",
                        "docId": null,
                        "handleStep": null,
                        "handler": null,
                        "handlerName": null,
                        "id": null,
                        "interacterId": null,
                        "isCheckQualityScore": null,
                        "isValid": null,
                        "piid": null,
                        "projectId": 2538,
                        "qualityScore": -1,
                        "qualityScoreBak": null,
                        "qualityScoreStr": "无法统计",
                        "taskId": null,
                        "title": "213123123"
                    },
                    "rectificationScore": 22
                },
                {
                    "assessmentScore": -1,
                    "assessmentScoreStr": "无法统计",
                    "mutualEvaluationScore": "1.00",
                    "mutualEvaluationScoreDetailsList": [
                        [
                            "小明",
                            "组员",
                            "优"
                        ]
                    ],
                    "projectName": "0202test-2",
                    "projectRole": "组长",
                    "projectScore": {
                        "appraiseBatchsId": null,
                        "checkHandlerTime": null,
                        "checkStatus": null,
                        "completeScore": -1,
                        "completeScoreStr": "无法统计",
                        "docId": null,
                        "handleStep": null,
                        "handler": null,
                        "handlerName": null,
                        "id": null,
                        "interacterId": null,
                        "isCheckQualityScore": null,
                        "isValid": null,
                        "piid": null,
                        "projectId": 2486,
                        "qualityScore": -1,
                        "qualityScoreBak": null,
                        "qualityScoreStr": "无法统计",
                        "taskId": null,
                        "title": "0202test-2"
                    },
                    "rectificationScore": 33
                },
                {
                    "assessmentScore": -1,
                    "assessmentScoreStr": "无法统计",
                    "mutualEvaluationScore": "0.85",
                    "mutualEvaluationScoreDetailsList": [
                        [
                            "小明",
                            "组员",
                            "良"
                        ]
                    ],
                    "projectName": "20230221lzw测试",
                    "projectRole": "组长",
                    "projectScore": {
                        "appraiseBatchsId": null,
                        "checkHandlerTime": null,
                        "checkStatus": null,
                        "completeScore": -1,
                        "completeScoreStr": "无法统计",
                        "docId": null,
                        "handleStep": null,
                        "handler": null,
                        "handlerName": null,
                        "id": null,
                        "interacterId": null,
                        "isCheckQualityScore": null,
                        "isValid": null,
                        "piid": null,
                        "projectId": 2505,
                        "qualityScore": -1,
                        "qualityScoreBak": null,
                        "qualityScoreStr": "无法统计",
                        "taskId": null,
                        "title": "20230221lzw测试"
                    },
                    "rectificationScore": 11
                }
            ],
            "averageAssessmentScore": "无法统计",
            "averageCompleteScore": "无法统计",
            "averageQualityScore": "无法统计",
            "averageRectificationScore": "22.0",
            "staffName": "胡椒籽"
        },
        {
            "auditProjectBelongStaff": [
                {
                    "assessmentScore": -1,
                    "assessmentScoreStr": "无法统计",
                    "mutualEvaluationScore": "0.85",
                    "mutualEvaluationScoreDetailsList": [
                        [
                            "胡椒籽",
                            "组长",
                            "良"
                        ]
                    ],
                    "projectName": "213123123",
                    "projectRole": "组员",
                    "projectScore": {
                        "appraiseBatchsId": null,
                        "checkHandlerTime": null,
                        "checkStatus": null,
                        "completeScore": -1,
                        "completeScoreStr": "不考核",
                        "docId": null,
                        "handleStep": null,
                        "handler": null,
                        "handlerName": null,
                        "id": null,
                        "interacterId": null,
                        "isCheckQualityScore": null,
                        "isValid": null,
                        "piid": null,
                        "projectId": 2538,
                        "qualityScore": -1,
                        "qualityScoreBak": null,
                        "qualityScoreStr": "无法统计",
                        "taskId": null,
                        "title": "213123123"
                    },
                    "rectificationScore": 22
                },
                {
                    "assessmentScore": -1,
                    "assessmentScoreStr": "无法统计",
                    "mutualEvaluationScore": "1.00",
                    "mutualEvaluationScoreDetailsList": [
                        [
                            "胡椒籽",
                            "组长",
                            "优"
                        ]
                    ],
                    "projectName": "0202test-2",
                    "projectRole": "组员",
                    "projectScore": {
                        "appraiseBatchsId": null,
                        "checkHandlerTime": null,
                        "checkStatus": null,
                        "completeScore": -1,
                        "completeScoreStr": "不考核",
                        "docId": null,
                        "handleStep": null,
                        "handler": null,
                        "handlerName": null,
                        "id": null,
                        "interacterId": null,
                        "isCheckQualityScore": null,
                        "isValid": null,
                        "piid": null,
                        "projectId": 2486,
                        "qualityScore": -1,
                        "qualityScoreBak": null,
                        "qualityScoreStr": "无法统计",
                        "taskId": null,
                        "title": "0202test-2"
                    },
                    "rectificationScore": 33
                },
                {
                    "assessmentScore": -1,
                    "assessmentScoreStr": "无法统计",
                    "mutualEvaluationScore": "0.70",
                    "mutualEvaluationScoreDetailsList": [
                        [
                            "胡椒籽",
                            "组长",
                            "中"
                        ]
                    ],
                    "projectName": "20230221lzw测试",
                    "projectRole": "组员",
                    "projectScore": {
                        "appraiseBatchsId": null,
                        "checkHandlerTime": null,
                        "checkStatus": null,
                        "completeScore": -1,
                        "completeScoreStr": "不考核",
                        "docId": null,
                        "handleStep": null,
                        "handler": null,
                        "handlerName": null,
                        "id": null,
                        "interacterId": null,
                        "isCheckQualityScore": null,
                        "isValid": null,
                        "piid": null,
                        "projectId": 2505,
                        "qualityScore": -1,
                        "qualityScoreBak": null,
                        "qualityScoreStr": "无法统计",
                        "taskId": null,
                        "title": "20230221lzw测试"
                    },
                    "rectificationScore": 11
                }
            ],
            "averageAssessmentScore": "无法统计",
            "averageCompleteScore": "不考核",
            "averageQualityScore": "无法统计",
            "averageRectificationScore": "22.0",
            "staffName": "小明"
        }
    ]
}
1
{
2
    "pageStart": 0
3
}
{
"dupRecflag": null,
"firstResult": 0,
"limit": 999999999,
"maxResult": 999999999,
"message": "查询成功!",
"pageStart": 0,
"receiveflag": null,
"root": {
"staffMessageList": [
{
"auditProjectBelongStaff": [
{
"assessmentScore": -1,
"assessmentScoreStr": "无法统计",
"mutualEvaluationScore": "1.00",
"mutualEvaluationScoreDetailsList": [
[
"格温",
"组长",
"优"
]
],
"projectName": "test071102",
"projectRole": "组员",
"projectScore": {
"appraiseBatchsId": null,
"checkHandlerTime": null,
"checkStatus": null,
"completeScore": -1,
"completeScoreStr": "不考核",
"docId": null,
"handleStep": null,
"handler": null,
"handlerName": null,
"id": null,
"interacterId": null,
"isCheckQualityScore": null,
"isValid": null,
"piid": null,
"projectId": 2625,
"qualityScore": -1,
"qualityScoreBak": null,
"qualityScoreStr": "无法统计",
"taskId": null,
"title": "test071102"
},
"rectificationScore": 70
},
{
"assessmentScore": -1,
"assessmentScoreStr": "无法统计",
"mutualEvaluationScore": "0.85",
"mutualEvaluationScoreDetailsList": [
[
"格温",
"组长",
"良"
]
],
"projectName": "分支机构离任稽核hj-071002",
"projectRole": "组员",
"projectScore": {
"appraiseBatchsId": null,
"checkHandlerTime": null,
"checkStatus": null,
"completeScore": -1,
"completeScoreStr": "不考核",
"docId": null,
"handleStep": null,
"handler": null,
"handlerName": null,
"id": null,
"interacterId": null,
"isCheckQualityScore": null,
"isValid": null,
"piid": null,
"projectId": 2614,
"qualityScore": -1,
"qualityScoreBak": null,
"qualityScoreStr": "无法统计",
"taskId": null,
"title": "分支机构离任稽核hj-071002"
},
"rectificationScore": 80
}
],
"averageAssessmentScore": "无法统计",
"averageCompleteScore": "不考核",
"averageQualityScore": "无法统计",
"averageRectificationScore": "75.0",
"staffName": "王大强"
},
{
"auditProjectBelongStaff": [
{
"assessmentScore": -1,
"assessmentScoreStr": "无法统计",
"mutualEvaluationScore": "1.00",
"mutualEvaluationScoreDetailsList": [
[
"王大强",
"组员",
"优"
]
],
"projectName": "test071102",
"projectRole": "组长",
"projectScore": {
"appraiseBatchsId": null,
"checkHandlerTime": null,
"checkStatus": null,
"completeScore": -1,
"completeScoreStr": "无法统计",
"docId": null,
"handleStep": null,
"handler": null,
"handlerName": null,
"id": null,
"interacterId": null,
"isCheckQualityScore": null,
"isValid": null,
"piid": null,
"projectId": 2625,
"qualityScore": -1,
"qualityScoreBak": null,
"qualityScoreStr": "无法统计",
"taskId": null,
"title": "test071102"
},
"rectificationScore": 70
},
{
"assessmentScore": -1,
"assessmentScoreStr": "无法统计",
"mutualEvaluationScore": "0.93",
"mutualEvaluationScoreDetailsList": [
[
"王大强",
"组员",
"良"
],
[
"呕小君",
"组员",
"优"
]
],
"projectName": "分支机构离任稽核hj-071002",
"projectRole": "组长",
"projectScore": {
"appraiseBatchsId": null,
"checkHandlerTime": null,
"checkStatus": null,
"completeScore": -1,
"completeScoreStr": "无法统计",
"docId": null,
"handleStep": null,
"handler": null,
"handlerName": null,
"id": null,
"interacterId": null,
"isCheckQualityScore": null,
"isValid": null,
"piid": null,
"projectId": 2614,
"qualityScore": -1,
"qualityScoreBak": null,
"qualityScoreStr": "无法统计",
"taskId": null,
"title": "分支机构离任稽核hj-071002"
},
"rectificationScore": 80
}
],
"averageAssessmentScore": "无法统计",
"averageCompleteScore": "无法统计",
"averageQualityScore": "无法统计",
"averageRectificationScore": "75.0",
"staffName": "格温"
},
{
"auditProjectBelongStaff": [
{
"assessmentScore": -1,
"assessmentScoreStr": "无法统计",
"mutualEvaluationScore": "0.85",
"mutualEvaluationScoreDetailsList": [
[
"格温",
"组长",
"良"
]
],
"projectName": "分支机构离任稽核hj-071002",
"projectRole": "组员",
"projectScore": {
"appraiseBatchsId": null,
"checkHandlerTime": null,
"checkStatus": null,
"completeScore": -1,
"completeScoreStr": "不考核",
"docId": null,
"handleStep": null,
"handler": null,
"handlerName": null,
"id": null,
"interacterId": null,
"isCheckQualityScore": null,
"isValid": null,
"piid": null,
"projectId": 2614,
"qualityScore": -1,
"qualityScoreBak": null,
"qualityScoreStr": "无法统计",
"taskId": null,
"title": "分支机构离任稽核hj-071002"
},
"rectificationScore": 80
}
],
"averageAssessmentScore": "无法统计",
"averageCompleteScore": "不考核",
"averageQualityScore": "无法统计",
"averageRectificationScore": "80.0",
"staffName": "呕小君"
}
]

Answer 1

思路：

1. 对收到的数据进行进行结构变换。
2. 利用span-method实现单元格占多行。

代码如下，数据变换的时候要根据具体的业务进行相应的修改。

<template>
    <div class="hello">
        <el-table :data="transformData(srcData)" :span-method="objectSpanMethod" border :header-cell-style="{'text-align':'center', background: '#f3f6fd'}" :cell-style="{'text-align':'center'}">
            <el-table-column prop="staffName" label="人员名称"></el-table-column>
            <el-table-column prop="projectName" label="项目"></el-table-column>
            <el-table-column prop="projectRole" label="角色"></el-table-column>
            <el-table-column prop="assessmentScore" label="考核得分"></el-table-column>
            <el-table-column prop="mutualEvaluationScore" label="互评得分">
                <template slot-scope="scope">
                    <el-link type="primary" v-if="scope.row.mutualEvaluationScore !== ''" @click="showMutualEvaluationScore(scope.row)">
                        {{ scope.row.mutualEvaluationScore }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column prop="rectificationScore" label="稽核发现问题数量得分"></el-table-column>
            <el-table-column prop="qualityScore" label="稽核发现问题质量得分"></el-table-column>
            <el-table-column prop="completeScore" label="项目完成进度得分"></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'TableTest',
    props: {
        msg: String
    },
    data() {
        return {
            srcData: {
                "dupRecflag": null,
                "firstResult": 0,
                "limit": 999999999,
                "maxResult": 999999999,
                "message": "查询成功!",
                "pageStart": 0,
                "receiveflag": null,
                "root": {
                    "staffMessageList": [
                        {
                            "auditProjectBelongStaff": [
                                {
                                    "assessmentScore": -1,
                                    "assessmentScoreStr": "无法统计",
                                    "mutualEvaluationScore": "1.00",
                                    "mutualEvaluationScoreDetailsList": [
                                        [
                                            "格温",
                                            "组长",
                                            "优"
                                        ]
                                    ],
                                    "projectName": "test071102",
                                    "projectRole": "组员",
                                    "projectScore": {
                                        "appraiseBatchsId": null,
                                        "checkHandlerTime": null,
                                        "checkStatus": null,
                                        "completeScore": -1,
                                        "completeScoreStr": "不考核",
                                        "docId": null,
                                        "handleStep": null,
                                        "handler": null,
                                        "handlerName": null,
                                        "id": null,
                                        "interacterId": null,
                                        "isCheckQualityScore": null,
                                        "isValid": null,
                                        "piid": null,
                                        "projectId": 2625,
                                        "qualityScore": -1,
                                        "qualityScoreBak": null,
                                        "qualityScoreStr": "无法统计",
                                        "taskId": null,
                                        "title": "test071102"
                                    },
                                    "rectificationScore": 70
                                },
                                {
                                    "assessmentScore": -1,
                                    "assessmentScoreStr": "无法统计",
                                    "mutualEvaluationScore": "0.85",
                                    "mutualEvaluationScoreDetailsList": [
                                        [
                                            "格温",
                                            "组长",
                                            "良"
                                        ]
                                    ],
                                    "projectName": "分支机构离任稽核hj-071002",
                                    "projectRole": "组员",
                                    "projectScore": {
                                        "appraiseBatchsId": null,
                                        "checkHandlerTime": null,
                                        "checkStatus": null,
                                        "completeScore": -1,
                                        "completeScoreStr": "不考核",
                                        "docId": null,
                                        "handleStep": null,
                                        "handler": null,
                                        "handlerName": null,
                                        "id": null,
                                        "interacterId": null,
                                        "isCheckQualityScore": null,
                                        "isValid": null,
                                        "piid": null,
                                        "projectId": 2614,
                                        "qualityScore": -1,
                                        "qualityScoreBak": null,
                                        "qualityScoreStr": "无法统计",
                                        "taskId": null,
                                        "title": "分支机构离任稽核hj-071002"
                                    },
                                    "rectificationScore": 80
                                }
                            ],
                            "averageAssessmentScore": "无法统计",
                            "averageCompleteScore": "不考核",
                            "averageQualityScore": "无法统计",
                            "averageRectificationScore": "75.0",
                            "staffName": "小丽"
                        },
                        {
                            "auditProjectBelongStaff": [
                                {
                                    "assessmentScore": -1,
                                    "assessmentScoreStr": "无法统计",
                                    "mutualEvaluationScore": "1.00",
                                    "mutualEvaluationScoreDetailsList": [
                                        [
                                            "小丽",
                                            "组员",
                                            "优"
                                        ]
                                    ],
                                    "projectName": "test071102",
                                    "projectRole": "组长",
                                    "projectScore": {
                                        "appraiseBatchsId": null,
                                        "checkHandlerTime": null,
                                        "checkStatus": null,
                                        "completeScore": -1,
                                        "completeScoreStr": "无法统计",
                                        "docId": null,
                                        "handleStep": null,
                                        "handler": null,
                                        "handlerName": null,
                                        "id": null,
                                        "interacterId": null,
                                        "isCheckQualityScore": null,
                                        "isValid": null,
                                        "piid": null,
                                        "projectId": 2625,
                                        "qualityScore": -1,
                                        "qualityScoreBak": null,
                                        "qualityScoreStr": "无法统计",
                                        "taskId": null,
                                        "title": "test071102"
                                    },
                                    "rectificationScore": 70
                                },
                                {
                                    "assessmentScore": -1,
                                    "assessmentScoreStr": "无法统计",
                                    "mutualEvaluationScore": "0.93",
                                    "mutualEvaluationScoreDetailsList": [
                                        [
                                            "小丽",
                                            "组员",
                                            "良"
                                        ],
                                        [
                                            "小君",
                                            "组员",
                                            "优"
                                        ]
                                    ],
                                    "projectName": "分支机构离任稽核hj-071002",
                                    "projectRole": "组长",
                                    "projectScore": {
                                        "appraiseBatchsId": null,
                                        "checkHandlerTime": null,
                                        "checkStatus": null,
                                        "completeScore": -1,
                                        "completeScoreStr": "无法统计",
                                        "docId": null,
                                        "handleStep": null,
                                        "handler": null,
                                        "handlerName": null,
                                        "id": null,
                                        "interacterId": null,
                                        "isCheckQualityScore": null,
                                        "isValid": null,
                                        "piid": null,
                                        "projectId": 2614,
                                        "qualityScore": -1,
                                        "qualityScoreBak": null,
                                        "qualityScoreStr": "无法统计",
                                        "taskId": null,
                                        "title": "分支机构离任稽核hj-071002"
                                    },
                                    "rectificationScore": 80
                                }
                            ],
                            "averageAssessmentScore": "无法统计",
                            "averageCompleteScore": "无法统计",
                            "averageQualityScore": "无法统计",
                            "averageRectificationScore": "75.0",
                            "staffName": "格温"
                        },
                        {
                            "auditProjectBelongStaff": [
                                {
                                    "assessmentScore": -1,
                                    "assessmentScoreStr": "无法统计",
                                    "mutualEvaluationScore": "0.85",
                                    "mutualEvaluationScoreDetailsList": [
                                        [
                                            "格温",
                                            "组长",
                                            "良"
                                        ]
                                    ],
                                    "projectName": "分支机构离任稽核hj-071002",
                                    "projectRole": "组员",
                                    "projectScore": {
                                        "appraiseBatchsId": null,
                                        "checkHandlerTime": null,
                                        "checkStatus": null,
                                        "completeScore": -1,
                                        "completeScoreStr": "不考核",
                                        "docId": null,
                                        "handleStep": null,
                                        "handler": null,
                                        "handlerName": null,
                                        "id": null,
                                        "interacterId": null,
                                        "isCheckQualityScore": null,
                                        "isValid": null,
                                        "piid": null,
                                        "projectId": 2614,
                                        "qualityScore": -1,
                                        "qualityScoreBak": null,
                                        "qualityScoreStr": "无法统计",
                                        "taskId": null,
                                        "title": "分支机构离任稽核hj-071002"
                                    },
                                    "rectificationScore": 80
                                }
                            ],
                            "averageAssessmentScore": "无法统计",
                            "averageCompleteScore": "不考核",
                            "averageQualityScore": "无法统计",
                            "averageRectificationScore": "80.0",
                            "staffName": "小君"
                        }
                    ]
                },
                "start": 0,
                "success": true,
                "totalProperty": 3
            }
        }
    },
    methods: {
        transformData(srcData) {
            let tableData = [];
            srcData.root.staffMessageList.forEach(staff => {
                let staffData = [];
                let rectificationScore = 0.0;
                staff.auditProjectBelongStaff.forEach(project => {
                    staffData.push({
                        staffName: staff.staffName,
                        projectName: project.projectName,
                        projectRole: project.projectRole,
                        assessmentScore: project.assessmentScoreStr,
                        mutualEvaluationScore: project.mutualEvaluationScore,
                        mutualEvaluationScoreDetailsList: project.mutualEvaluationScoreDetailsList,
                        rectificationScore: project.rectificationScore,
                        qualityScore: project.projectScore.qualityScoreStr,
                        completeScore: project.projectScore.completeScoreStr
                    })
                    rectificationScore += project.rectificationScore;
                });
                staffData.push({
                    staffName: staff.staffName,
                    projectName: '平均',
                    assessmentScore: staff.averageAssessmentScore,
                    rectificationScore: (rectificationScore / staffData.length).toFixed(1),
                    qualityScore: staff.averageQualityScore,
                    completeScore: staff.averageCompleteScore
                });
                staffData[0].span = {
                    rowspan: staffData.length,
                    colspan: 1
                };

                tableData = tableData.concat(staffData);
            });

            return tableData;
        },
        objectSpanMethod({ row, columnIndex }) {
            if (columnIndex === 0) {
                if (row.span) {
                    return row.span;
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },
        showMutualEvaluationScore(row) {
            // 这里实现展示互评信息
            this.$message(JSON.stringify(row.mutualEvaluationScoreDetailsList));
        }
    }
}
</script>