对于代码的优雅来说，可能每个人的看法是不一样的，但是对我来说，简洁，易懂，容易维护，就够了。
接下来这段代码是封装组件时用到的，主要是当时的详情弹窗要弹得东西太多了。
这只是一个思路，一种启发。
能够做到思路打开是最好的，不要局限在这一种方法里，大家有更好的思路，欢迎讨论。
<template> <el-descriptions title="郭冀鑫" :column="3" border > <!-- 此处 detailDict 是我写的字典 --> <el-descriptions-item v-for="item in detailDict" :key="item.key" :label="item.label" > <!-- 此处 detailList 后端返回的数据 --> {{ detailList[item.key] }} </el-descriptions-item> </el-descriptions></template>export default { data() { return { // 自己定义的字典，通过v-for把描述列表循环出来 // lable是这个列表描述列表要显示的lable // key是后端返回的数据中的字段 detailDict: [ { label: '姓名', key: 'name'}, { label: '性别', key: 'sex' }, { label: '出生年月', key: 'birthday'}, { label: '民族', key: 'nation'}, { label: '籍贯', key: 'nativeplace'}, { label: '出生地', key: 'birthplace'}, { label: '入党时间', key: 'timeOfJoinTheCommunistParty'}, { label: '参加工作时间', key: 'timeOfWorkStart' }, { label: '健康状况', key: 'healthyStatus' }, { label: '专业技术职务', key: 'professionalSkillPosition'}, { label: '熟悉专业有何专长',key: 'speciality'}, { label: '现任职时间',key: 'timeInJob'}, { label: '任同级职务时间', key: 'timeInSameLevelJob'}, { label: '任同级职务时间', key: 'timeInSameLevelJob' }, { label: '全日制教育学历', key: 'fullTimeEducation'}, { label: '全日制教育学位', key: 'fullTimeEducationXuewei'}, { label: '全日制教育毕业院校', key: 'fullTimeProfessionAndSchool'}, { label: '全日制教育专业', key: 'fullTimeProfessionAndSchoolXuewei'}, { label: '在职制教育学历', key: 'inServiceEducation'}, { label: '在职制教育学位', key: 'inServiceEducationXuewei' }, { label: '在职制教育毕业院校', key: 'inServiceProfessionAndSchool'}, { label: '在职制教育专业', key: 'inServiceProfessionAndSchoolXuewei'}, { label: '现任职务', key: 'presentDuty' }, { label: '拟任职务', key: 'toProposedDuty' }, { label: '拟免职务', key: 'toAvoidDuty'}, { label: '简历', key: 'resume'}, { label: '奖惩情况', key: 'rewardsAndPunishment' }, { label: '年度考核结果', key: 'annualAssessmentResult' }, { label: '任免理由', key: 'reasonOfAppointAndDismiss' } ] } }}</script>