vue+element 生成table

根据数据格式用 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": "呕小君"
}
]

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

6条回答默认最新

langzitianya 2023-12-04 19:09

关注

思路：

对收到的数据进行进行结构变换。
利用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>

本回答被题主选为最佳回答 , 对您是否有帮助呢?

查看更多回答(5条)

报告相同问题？

关注问题

vue+element ui 之table中表单校验 javascript vue.js 前端框架
2022-07-13 09:27

回答 5 已采纳不排除是绑定时机问题 table中的el-form-item推荐你还是直接在 el-form-item 标签上写rule ，你也不需要在el-form去写统一的rule去绑定prop el-form
vue+element类似动态横向树形表格生成问题。 vue.js
2021-01-13 00:05

回答 4 已采纳
vue+element java 前端
2022-10-24 09:40

回答 4 已采纳 <el-table-column> //定义此行代码 <template slot-scope="scope"> <el-row> &l
vue+element实现sku表格
2022-02-12 16:34

Vue.js是一个轻量级、高性能的前端开发框架，而Element UI则是一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库，提供了丰富的UI组件，便于快速构建美观的界面。首先，让我们了解Vue.js中的基本概念。Vue...
Vue+Element UI dialog中动态加载不同的子组件，如何实现？ elementui vue.js 前端
2021-09-18 09:53

回答 4 已采纳把不同的表单做成子组件吧，例如 Form1.vue(假设name 是form1), Form2.vue(假设name 是form2), Form3.vue(假设name 是form3),然后再封装一层
vue+element+dhtmlxGant(甘特图) vue.js
2019-09-17 16:12

回答 2 已采纳会不会是F12 导致你的窗口大小改变导致有些方法重新执行了
vue + element + select 清空问题 vue.js
2018-09-06 11:29

回答 4 已采纳问题已经解决，谢谢大家
vue+element+Java实现批量删除功能
2020-10-17 05:14

### Vue.js 与 Element UI 实现前端界面在前端部分，我们使用Element UI提供的组件来构建表格，并实现批量删除功能。主要用到的组件包括`<el-table>`用于显示数据表格，`<el-table-column>`用于定义表格列，以及`...
vue+element手机号验证格式 elementui vue.js
2022-12-24 20:09

回答 2 已采纳手机号：^1[3-9]\d{9}$座机号：^0\d{2,3}-\d{7,8}$验证两次，不要写在一个表达式里别人看着也清晰
vue+element ui点击表格行会触发单元格事件 vue.js 前端前端框架
2022-09-09 15:23

回答 2 已采纳 @click.stop阻止事件冒泡
vue+element项目使用国际化不生效？ vue.js
2023-02-09 17:09

回答 3 已采纳参考一下，https://blog.csdn.net/weixin_55690518/article/details/120033986
详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
2020-10-17 03:18

在本篇文章中，将探讨如何使用Vue.js框架和Element UI组件库来实现后端发送配置，前端动态生成表单和表格的功能。这样的功能在实际应用中非常实用，可以广泛用于管理后台、配置中心等场景。首先，要实现动态表单的...
请问vue+element的数组updated问题 elementui vue.js 有问必答
2021-07-28 19:25

回答 2 已采纳为何不去看看官方文档呢，官方文档不是说了吗？也提到了相关的说明 updated可能并不会执行，最好的还是使用计算属性或者用watch监听数据变化，将你这个变化值的方法在写一份加入到watch里面做监听
vue + element table组件实现下载Excel
2023-03-28 09:50

lvvvvv_v的博客 //xlsx核心 function generateArray (table) { var out = []; var rows = table.querySelectorAll('tr'); var ranges = []; for (var R = 0; R ; ++R) { var outRow = []; var row = rows[R]; var columns = row....
vue+element创建动态的form表单及动态生成表格的行和列
2020-10-16 23:22

综上所述，本文是一篇对于使用Vue.js和Element UI进行前端开发工作非常有帮助的文章，它不仅提供了一种动态表单和表格生成的实现思路，还提供了大量实用的代码实例。对于希望提升前端开发技能的开发者来说，本篇文章...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已结题（查看结题原因） 12月4日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 12月4日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
修改了问题 12月4日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 12月4日

悬赏问题

¥20 python忆阻器数字识别
¥15 无法输出helloworld
¥15 高通uboot 打印ubi init err 22
¥20 PDF元数据中的XMP媒体管理属性
¥15 R语言中lasso回归报错
¥15 网站突然不能访问了，上午还好好的
¥15 有没有dl可以帮弄”我去图书馆”秒选道具和积分
¥15 semrush,SEO,内嵌网站，api
¥15 Stata:为什么reghdfe后的因变量没有被发现识别啊
¥15 振荡电路，ADS仿真

vue+element 生成table

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

6条回答 默认 最新

问题事件

悬赏问题

6条回答默认最新