一、需求分析：
现要展示基础信息表单，表单字段是动态的，根据场景不同所需字段内容与类型会不同，这时候我们引出今天要分析的内容：el-form-renderer
二、实现步骤：
2.1、安装：yarn add @femessage/el-form-renderer
注：安装前需确认是否已正确安装并使用了element-ui
2.2、
使用el-form-renderer
<el-form-renderer :content="formContent" ref="form" class="form-box"/>
配置formContent：
这时候我们就可以动态的控制表单项的内容了，数据从接口获取即可：
export const formContent = [ { $type: 'input', $id: 'operationDoctor', label: '字段名', $el: { placeholder: '请输入' }, rules: [{ required: true, message: '请输入', trigger: 'blur' }] }, { $type: 'input', $id: 'diagnoseWay', label: '字段名', $el: { placeholder: '请输入' }, rules: [{ required: true, message: '请输入', trigger: 'blur' }] }, { $type: 'date-picker', $id: 'operationDate', label: '字段名', $el: { type: 'datetime', placeholder: '选择日期', valueFormat: 'yyyy-MM-dd HH:mm:ss', // 不添加此属性将获取到一个空对象,如果需要校验在rules中不能加type:date属性否则报错 prefixIcon: 'el-icon-date', pickerOptions: { disabledDate: time => { return time.getTime() < Date.now() - 8.64e7 // 8.64e7科学计数法，1天的毫秒数，1000 * 60 * 60 * 24 = 8.64 * 10 的 7 次方 } } }, rules: [{ required: true, message: '请选择时间', trigger: 'change' }] }, { $type: 'input', $id: 'sickName', label: '字段名', $el: { placeholder: '请输入' } }, { $type: 'input', $id: 'sickAge', label: '字段名', $el: { placeholder: '请输入' } }, { $type: 'input', $id: 'operationRoom', label: '字段名', $el: { placeholder: '请输入' } }, { $type: 'select', $id: 'sickSex', label: '字段名', $el: { placeholder: '请选择' }, $options: [ { label: '男', value: 0 }, { label: '女', value: 1 } ] }, { $type: 'input', $id: 'admissionNumber', label: '字段名', $el: { placeholder: '请输入' } }, { $type: 'input', $id: 'illArea', label: '字段名', $el: { placeholder: '请输入' } }, { $type: 'input', $id: 'bedNum', label: '字段名', $el: { placeholder: '请输入' } } ]
2.3、对于复杂表单可以自定义组件（component）：
2.3.1、定义组件：
<template> <div> <el-input :value="value" @input="onInput" /> <el-button @click="onInput('输入')">输入</el-button> </div> </template> <script> export default { props: { value: String }, methods: { onInput(val) { this.$emit('input', val) } } } </script>
使用：
<template> <el-form-renderer :content="content"/> </template> <script> import MyInput from './components/my-input.vue' export default { data() { return { content: [ { component: MyInput, // 使用组件 id: 'myInput', label: '自定义输入框组件' } ] } }, } </script>
三、效果如图：
四、欢迎留言，交流指正。
