动态表单：el-form-renderer-阿里云开发者社区

动态表单：el-form-renderer

2023-07-10 155

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 动态表单：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>

使用：

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