动态表单：el-form-renderer

一、需求分析

现要展示基础信息表单，表单字段是动态的，根据场景不同所需字段内容与类型会不同，这时候我们引出今天要分析的内容：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>

2.3.2、使用

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

三、效果如图

四、欢迎交流指正