前端vue优雅的写出描述列表，el-descriptions，思路分享【随记】

对于代码的优雅来说，可能每个人的看法是不一样的，但是对我来说，简洁，易懂，容易维护，就够了。

接下来这段代码是封装组件时用到的，主要是当时的详情弹窗要弹得东西太多了。

这只是一个思路，一种启发。

能够做到思路打开是最好的，不要局限在这一种方法里，大家有更好的思路，欢迎讨论。

<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>

javascript">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: 'timeOfJoinThe***munistParty'},
        { 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>