信息展示配置化处理一、背景后端管理系统纯展示各种信息，一般都是拿到后端数据直接展示。进行简单的配置，便可实现各个字段和

一、背景

后端管理系统纯展示各种信息，一般都是拿到后端数据直接展示。进行简单的配置，便可实现各个字段和模块的展示，帮助我们研发节约开始成本

二、配置化

高复用、好维护。是用配置化方式开发表单，完完全全就是为了高复用、可维护性，然后提升开发效率，解放生产力。

2.1 设置协议

首先要思考每个字段展示什么

label：中文名字
fieldKey：字段英文名称
处理函数，处理数据的转换的。例如时间戳转时间，分转元展示

customRender(h, data) {
   return (<span>{data.reportPhone}</span>);
}

2.2 实现渲染逻辑

实现一个组件-DisplayForm，设置2个props，一个是data要渲染的数据，一个是协议的fields。

<template v-for="field in fields">
    <el-col v-if="!(field.hideWhenEmpty && !data[field.fieldKey])" :key="field.fieldKey + field.label" class="display-form-item" :span="field.span || 8">
        <span v-if="field.label" class="label">{{ field.label }}：</span>
        <span> {{ data[field.fieldKey]}} </span>
    </el-col>
</template>