EleFormDynamic 动态表单组件

组件介绍

EleFormDynamic 是一个基于 Element UI 封装的动态表单组件，用于在表单中快速实现动态增删表单项的功能。它支持动态添加、删除、排序表单项，适用于需要用户输入不定数量数据的场景。

安装与引入

安装依赖

npm install diandi-ele-form-dynamic

全局引入

在 src/projects/scrm/utils/el-form.js 中全局引入和配置：

import Vue from 'vue'
import EleFormDynamic from 'diandi-ele-form-dynamic/dist/diandi-ele-form-dynamic.umd.min.js'

// 注册 dynamic 组件
Vue.component('dynamic', EleFormDynamic)

// 全局配置
Vue.use(EleForm, {
  dynamic: {
    delimiter: '/' // 所有的 dynamic 都会有 delimiter = '/' 的属性值
  }
})

全局配置

// 全局 dynamic 配置
dynamic: {
  delimiter: String // 分隔符
}

基本使用

简单动态表单

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        dynamicFields: []
      },
      formConfig: [
        {
          label: '动态字段',
          prop: 'dynamicFields',
          type: 'dynamic',
          formConfig: [
            {
              label: '名称',
              prop: 'name',
              type: 'input'
            },
            {
              label: '值',
              prop: 'value',
              type: 'input'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

复杂动态表单

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        items: []
      },
      formConfig: [
        {
          label: '商品列表',
          prop: 'items',
          type: 'dynamic',
          formConfig: [
            {
              label: '商品名称',
              prop: 'name',
              type: 'input',
              required: true
            },
            {
              label: '价格',
              prop: 'price',
              type: 'number',
              required: true
            },
            {
              label: '数量',
              prop: 'quantity',
              type: 'number',
              required: true
            },
            {
              label: '分类',
              prop: 'category',
              type: 'select',
              options: [
                { label: '电子产品', value: 'electronics' },
                { label: '服装', value: 'clothing' },
                { label: '食品', value: 'food' }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

属性配置

基础属性

属性	类型	描述	默认值
formConfig	Array	动态表单配置	[]
template	Object	动态表单模板	{}
addBtnText	String	添加按钮文本	'添加'
delBtnText	String	删除按钮文本	'删除'
max	Number	最大数量	Infinity
min	Number	最小数量	0
title	String	弹窗标题	-
width	String	弹窗宽度	'50%'
height	String	弹窗高度	'80%'
disabled	Boolean	是否禁用	false
readonly	Boolean	是否只读	false
labelWidth	String	标签宽度	'80px'
size	String	表单大小	'medium'
inline	Boolean	是否行内表单	false
showSubmit	Boolean	是否显示提交按钮	true
showReset	Boolean	是否显示重置按钮	true
submitText	String	提交按钮文本	'提交'
resetText	String	重置按钮文本	'重置'
popperClass	String	下拉框类名	-
popperAppendToBody	Boolean	是否将下拉框附加到body上	true
appendToBody	Boolean	是否将下拉菜单附加到body上	false
value	Array	绑定值	[]
name	String	原生name属性	-
label	String	标签文本	-
required	Boolean	是否必填	false
rules	Array	验证规则	[]
error	String	错误信息	-
validateEvent	Boolean	是否在输入时触发表单验证	true

动态表单配置

formConfig: [
  {
    label: String, // 标签文本
    prop: String, // 字段名
    type: String, // 表单类型
    required: Boolean, // 是否必填
    disabled: Boolean, // 是否禁用
    readonly: Boolean, // 是否只读
    placeholder: String, // 占位符
    defaultValue: Any, // 默认值
    rules: Array, // 验证规则
    props: Object, // 组件属性
    attrs: Object, // 元素属性
    class: String, // 自定义类名
    style: Object, // 自定义样式
    col: Number, // 栅格列数
    offset: Number, // 栅格偏移
    suffix: String, // 后缀文本
    prefix: String, // 前缀文本
    hidden: Boolean, // 是否隐藏
    component: Object, // 自定义组件
    render: Function, // 自定义渲染函数
    onChange: Function, // 值变化回调
    onBlur: Function, // 失焦回调
    onFocus: Function, // 聚焦回调
    options: Array, // 选项数据
    remote: Boolean, // 是否远程搜索
    remoteMethod: Function, // 远程搜索方法
    filterable: Boolean, // 是否可筛选
    multiple: Boolean, // 是否多选
    clearable: Boolean, // 是否可清空
    collapseTags: Boolean, // 是否折叠标签
    showPassword: Boolean, // 是否显示密码
    rows: Number, // 文本域行数
    min: Number, // 最小值
    max: Number, // 最大值
    step: Number, // 步长
    precision: Number, // 精度
    format: String, // 格式化
    valueFormat: String, // 值格式化
    rangeSeparator: String, // 范围分隔符
    startPlaceholder: String, // 开始占位符
    endPlaceholder: String, // 结束占位符
    pickerOptions: Object, // 选择器选项
    uploadOptions: Object, // 上传选项
    action: String, // 上传地址
    responseFn: Function, // 响应处理函数
    limit: Number, // 上传数量限制
    fileSize: Number, // 文件大小限制
    accept: String, // 接受的文件类型
    data: Object, // 上传额外数据
    headers: Object, // 上传请求头
    withCredentials: Boolean, // 是否携带凭证
    autoUpload: Boolean, // 是否自动上传
    listType: String, // 文件列表类型
    drag: Boolean, // 是否支持拖拽
    data: Array, // 树形数据
    nodeKey: String, // 节点键名
    props: Object, // 树形配置
    checkStrictly: Boolean, // 是否严格勾选
    defaultExpandAll: Boolean, // 是否默认展开所有
    expandOnClickNode: Boolean, // 是否点击节点展开
    checkOnClickNode: Boolean, // 是否点击节点勾选
    renderContent: Function, // 自定义节点渲染
    formConfig: Array, // 嵌套动态表单配置
    template: Object, // 嵌套动态表单模板
    addBtnText: String, // 嵌套添加按钮文本
    delBtnText: String, // 嵌套删除按钮文本
    max: Number, // 嵌套最大数量
    min: Number, // 嵌套最小数量
    title: String, // 嵌套弹窗标题
    width: String, // 嵌套弹窗宽度
    height: String, // 嵌套弹窗高度
    ak: String, // 地图AK
    center: Array, // 地图中心点
    zoom: Number, // 地图缩放级别
    marker: Boolean, // 是否显示标记
    search: Boolean, // 是否显示搜索
    resizeEnable: Boolean, // 是否允许调整大小
    enableMapClick: Boolean, // 是否允许地图点击
    plugin: Array, // 地图插件
    serverUrl: String, // 编辑器服务地址
    initialFrameWidth: String, // 初始宽度
    initialFrameHeight: Number, // 初始高度
    toolbars: Array, // 工具栏配置
    zIndex: Number, // 层级
    name: String, // 图标名称
    size: String, // 图标大小
    color: String // 图标颜色
  }
]

事件

事件名称	回调参数	描述
change	value	值变化时触发
add	index, value	添加项时触发
remove	index, value	删除项时触发
move	from, to, value	移动项时触发
validate	result, value	验证时触发
submit	value	提交时触发
reset	-	重置时触发

常见问题

1. 动态表单验证不生效

原因：验证规则配置错误或嵌套层级问题

解决方案：

检查 formConfig 中的 rules 配置是否正确
确认 prop 字段名是否唯一
对于嵌套动态表单，确保验证规则正确传递

2. 动态表单数据不更新

原因：数据绑定或模板配置问题

解决方案：

检查 v-model 绑定是否正确
确认 template 配置是否符合要求
对于复杂数据结构，考虑使用 deep 监听

3. 动态表单性能问题

原因：动态表单项过多或配置复杂

解决方案：

限制 max 属性，避免创建过多表单项
简化 formConfig 配置，减少复杂组件的使用
考虑使用虚拟滚动或分页加载

示例代码

完整示例

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    :label-width="'120px'"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        contacts: [],
        products: []
      },
      formConfig: [
        {
          label: '联系人',
          prop: 'contacts',
          type: 'dynamic',
          props: {
            addBtnText: '添加联系人',
            delBtnText: '删除联系人',
            max: 5,
            min: 1,
            formConfig: [
              {
                label: '姓名',
                prop: 'name',
                type: 'input',
                required: true
              },
              {
                label: '电话',
                prop: 'phone',
                type: 'input',
                required: true,
                rules: [
                  {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '请输入正确的电话号码',
                    trigger: 'blur'
                  }
                ]
              },
              {
                label: '邮箱',
                prop: 'email',
                type: 'input',
                rules: [
                  {
                    type: 'email',
                    message: '请输入正确的邮箱地址',
                    trigger: 'blur'
                  }
                ]
              }
            ]
          }
        },
        {
          label: '商品列表',
          prop: 'products',
          type: 'dynamic',
          props: {
            addBtnText: '添加商品',
            delBtnText: '删除商品',
            formConfig: [
              {
                label: '商品名称',
                prop: 'name',
                type: 'input',
                required: true
              },
              {
                label: '价格',
                prop: 'price',
                type: 'number',
                required: true,
                props: {
                  min: 0,
                  step: 0.01
                }
              },
              {
                label: '数量',
                prop: 'quantity',
                type: 'number',
                required: true,
                props: {
                  min: 1,
                  step: 1
                }
              },
              {
                label: '分类',
                prop: 'category',
                type: 'select',
                required: true,
                options: [
                  { label: '电子产品', value: 'electronics' },
                  { label: '服装', value: 'clothing' },
                  { label: '食品', value: 'food' },
                  { label: '其他', value: 'other' }
                ]
              }
            ]
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
      // 这里可以进行API调用等操作
      this.$message.success('提交成功')
    }
  }
}
</script>

<style scoped>
/* 自定义样式 */
</style>

嵌套动态表单示例

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        orders: []
      },
      formConfig: [
        {
          label: '订单列表',
          prop: 'orders',
          type: 'dynamic',
          props: {
            addBtnText: '添加订单',
            delBtnText: '删除订单',
            formConfig: [
              {
                label: '订单号',
                prop: 'orderNo',
                type: 'input',
                required: true
              },
              {
                label: '订单日期',
                prop: 'orderDate',
                type: 'date',
                required: true
              },
              {
                label: '商品列表',
                prop: 'items',
                type: 'dynamic',
                props: {
                  addBtnText: '添加商品',
                  delBtnText: '删除商品',
                  formConfig: [
                    {
                      label: '商品名称',
                      prop: 'name',
                      type: 'input',
                      required: true
                    },
                    {
                      label: '价格',
                      prop: 'price',
                      type: 'number',
                      required: true
                    },
                    {
                      label: '数量',
                      prop: 'quantity',
                      type: 'number',
                      required: true
                    }
                  ]
                }
              }
            ]
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

总结

EleFormDynamic 是一个功能强大的动态表单组件，通过简单的配置即可快速实现在表单中的动态增删表单项功能。它支持多种配置选项，可以满足不同场景下的动态表单需求。

通过全局配置和组件级配置的结合，可以灵活应对各种动态表单场景，大大提高了开发效率。

版本信息

最后更新时间: 2025-03-08
维护者: Wang chunsheng 2192138785@qq.com