mzm-auto-form

基于vue3、element-plus、typeScript实现的数据驱动式动态表单组件

使用

1. 安装

   npm i mzm-auto-form

2. 引入

   2.1 全局注册

   man.js

   // 注册mzm-auto-form组件
   import MzmAutoForm from 'mzm-auto-form';
   import 'mzm-auto-form/lib/index.css'
   app.use(MzmAutoForm);

   2.2 局部注册

   import { mzmAutoForm } from 'mzm-auto-form';
   import 'mzm-auto-form/lib/index.css'

3. 使用

   <mzmAutoForm ...other :config-list="formItemList">
   </mzmAutoForm>

组件参数

| 属性名 | 说明 | 类型 | 默认值 | | ---------- | ------------------------------------------------------------ | ---- | ------ | | 基本属性 | 本组件兼容element-plus el-form组件的所有参数，详细配置请参考element-plus官方文档 | —— | —— | | configList | 表单项配置列表，详情参考下方configList详解 | [] | [] |

configList：子元素对象详解

| 属性名 | 说明 | 类型 | 默认值 | | --------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------ | | key | 表单项 -- 的唯一标识，也是表单控件绑定的字段名 | string | ———— | | isHide | 表单项 -- 是否隐藏【启用表单不展示，表单数据中不返回该字段】 | boolean|function:(formdData)=>boolean | false | | valueUnit | 表单项 -- 表单项单位【仅非文本域输入框可用】 | any | ———— | | describe | 表单项 -- 表单项底部描述 | string | ———— | | formItemProps | 表单项 -- 配置【el-form-item 支持的配置属性】 | { [x: string]: any } | ———— | | rules | 表单项 -- 验证规则 | { [x: string]: any } | ———— | | defaultValue | 表单控件 -- 默认值 | any | "" | | type | 表单控件 -- 类型 | 'el-input'|'el-select'|'el-radio-group'|'el-radio-group_button'|'el-checkbox'|'el-date-picker'|'el-time-picker'|'el-time-picker' | ———— | | props | 表单控件 -- 配置【element表单控件支持的属性配置】 | { [x: string]: any } | ———— | | events | 表单控件 -- 事件【element表单控件支持的事件】 | { [x: string]: Function } | ———— | | eventsIn | 事件注入 | {innerName: string;emitName: string;}[] | ———— | | internalSlots | 表单控件 -- 内部插槽 | { innerName: string; slotName: string }[] | ———— | | options | 表单控件 -- 配置列表用于 select/radio/checkbox 的选项列表 | { label: string; value: any }[] | ()=>{ label: string; value: any }[] | ———— | | defaultValueFormatter | 数据 -- 初始化数据格式化方法 | Function: (defaultValue,itemConfig)=>any | ———— | | valueFormatter | 数据 -- 数据格式化方法 | Function: (value,formData,,itemConfig)=>any | ———— | | slotName | 自定义插槽名 -- 弃用type定义的表单控件 | string | ———— | | otherData | 额外的数据配置，可自行使用 | any | ———— |

组件事件

| 事件名 | 说明 | 类型 | | -------------- | -------------------- | ------------------------------------------------------------ | | loaded | 组件加载完成时触发 | Function：(formData)=>void | | 自定义注入事件 | 表单项事件触发时触发 | Function：（eventObj: any, formData: { [x: string]: any }, itemConfig: AutoFormItem, configList: AutoFormItem[]）=>any |

组件插槽

通过slotName参数，自定义插入表单项内的插槽名；

通过internalSlots参数，定义要插入element表单控件内部的插槽名 { innerName: string; slotName: string }[]

innerName：element-plus表单控件内部定义的插槽名称

slotName：插入innerName插槽的插槽名称

暴露内容

| 方法名/变量名 | 说明 | 类型 | | ------------- | ---------------------- | ---------------------- | | getFormData | 表单数据获取 | Function：()=>formData | | formRef | el-form表单控件ref实例 | ElForm |