El Form Renderer 使用教程

简介

el-form-renderer 是一款基于 ElementUI 组件库的渲染器，可以根据配置动态生成表单。本文将详细讲解如何使用 el-form-renderer。

安装

可以通过 npm 或 yarn 进行安装：

npm install el-form-renderer --save

yarn add el-form-renderer

引入

在需要使用的组件中引入 el-form-renderer：

import ElFormRenderer from 'el-form-renderer'

export default {
  components: {ElFormRenderer}
}

基本用法

配置结构

el-form-renderer 的核心是配置结构，实现表单配置的复杂程度与表单类型的复杂程度成正比。配置结构是一个数组，每个元素对应表单的一个字段，支持的配置项如下：

配置项	类型	必填	默认值	描述
label	String	否	配置项 key 的转换	表单项的标签
key	String	是	-	表单项字段名
type	String	是	-	表单项类型
value	Any	否	-	表单项初始值
rules	Object	否	-	表单项验证规则
props	Object	否	-	表单项组件属性，会透传到对应Form Item组件
options	Array/Object	否	-	下拉选项

示例配置结构：

const config = [
  {
    label: '用户名',
    key: 'username',
    type: 'input',
    value: '',
    props: {placeholder: '请输入用户名'},
    rules: [
      {required: true, message: '请输入用户名', trigger: 'blur'}
    ]
  },
  {
    label: '角色',
    key: 'role',
    type: 'select',
    value: '',
    props: {placeholder: '请选择角色'},
    options: [
      {value: 'admin', label: '管理员'},
      {value: 'user', label: '普通用户'}
    ],
    rules: [
      {required: true, message: '请选择角色', trigger: 'change'}
    ]
  }
]

渲染表单

在模板中，使用 el-form-renderer 标签，传入配置结构即可生成表单：

<el-form-renderer :config="config"></el-form-renderer>

获取表单数据

在模板中，使用 ref 注册表单，然后可以使用 formModel 获取表单数据：

<el-form-renderer ref="form" :config="config"></el-form-renderer>

this.$refs.form.formModel

提交表单

在模板中，使用 ref 注册表单，然后调用 submit 方法提交表单：

<el-form-renderer ref="form" :config="config"></el-form-renderer>

this.$refs.form.submit()

示例1：动态表单

以下示例演示如何使用 el-form-renderer 动态生成表单。假设我们有一个下拉列表，列表项对应不同表单，选中列表项时，即动态生成对应的表单。

首先定义一个下拉列表：

<el-select v-model="formType" placeholder="请选择表单类型">
  <el-option label="输入框" value="input" />
  <el-option label="下拉框" value="select" />
  <el-option label="开关" value="switch" />
</el-select>

然后根据选中值，动态生成配置结构：

// computed
computed: {
  config () {
    switch (this.formType) {
      case 'input':
        return [
          {label: '文本', key: 'text', type: 'input'}
        ]
      case 'select':
        return [
          {label: '选项', key: 'option', type: 'select', options: [
            {value: '1', label: '选项1'},
            {value: '2', label: '选项2'},
            {value: '3', label: '选项3'}
          ]}
        ]
      case 'switch':
        return [
          {key: 'switch', type: 'switch'}
        ]
      default:
        return []
    }
  }
}

最后使用 el-form-renderer 动态渲染表单：

<el-form-renderer :config="config"></el-form-renderer>

示例2：嵌套表单

以下示例演示如何在表单中嵌套子表单。假设我们有如下的用户表单：

const config = [
  {label: '用户名', key: 'username', type: 'input', value: 'John'},
  {label: '性别', key: 'gender', type: 'select', options: [
    {value: 'male', label: '男'},
    {value: 'female', label: '女'}
  ], value: 'male'},
  {label: '联系方式', key: 'contacts', type: 'object', children: [
    {label: '常用电话', key: 'phone', type: 'input', value: '18888888888'},
    {label: '邮箱', key: 'email', type: 'input', value: 'john@example.com'}
  ]}
]

其中，contacts 是一个 object 类型，对应一个子表单。

我们可以使用 el-form-renderer 嵌套渲染子表单：

<!-- 用户信息表单 -->
<el-form-renderer :config="config"></el-form-renderer>

<!-- 联系信息子表单（根据用户信息表单状态判断是否显示） -->
<el-form-renderer
  v-if="config.find(item => item.key === 'contacts').show"
  :config="config.find(item => item.key === 'contacts').children"
></el-form-renderer>

注意，子表单的配置结构需要作为父表单的一个字段传入，并且该字段需要包括一个 children 属性，该属性对应子表单的配置结构。在子表单中，可以使用 show 属性实现根据父表单状态判断是否显示。