动态表单:el-form-renderer

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

三、效果如图:

 

四、欢迎留言,交流指正。

相关文章
|
6月前
|
移动开发 JavaScript 小程序
uView Form 表单
uView Form 表单
139 1
|
6月前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
JavaScript
Element el-form 表单详解
本文目录 1. 前言 2. 基本用法 3. 行内表单 4. 标签对齐方式 5. 调整尺寸 6. 小结
1677 0
Element el-form 表单详解
|
JavaScript 数据格式
VUE element-ui下拉菜单el-select获取label值或value的值
VUE element-ui下拉菜单el-select获取label值或value的值
1959 0
VUE element-ui下拉菜单el-select获取label值或value的值
|
3月前
|
JavaScript 前端开发
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
vue element plus Form 表单
vue element plus Form 表单
256 0
|
4月前
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
223 1
不使用el-form仅仅单独给el-input设置表单校验
不使用el-form仅仅单独给el-input设置表单校验
395 0
element-ui的el-table与el-form的使用与表单校验
element-ui的el-table与el-form的使用与表单校验
element-ui的el-table与el-form的使用与表单校验
|
JavaScript
VUE element-ui之el-table表格内嵌进度条功能实现
VUE element-ui之el-table表格内嵌进度条功能实现
1486 0
VUE element-ui之el-table表格内嵌进度条功能实现