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

这篇具有很好参考价值的文章主要介绍了前端vue优雅的写出描述列表，el-descriptions，思路分享【随记】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

能够做到思路打开是最好的，不要局限在这一种方法里，大家有更好的思路，欢迎讨论。文章来源地址https://www.toymoban.com/news/detail-565933.html

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

到了这里，关于前端vue优雅的写出描述列表，el-descriptions，思路分享【随记】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！