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

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>

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/xuetang/2024-04-12/157803.html，文章来源：网络cs，作者：付梓，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！