vue+element-ui的form表单组件二次封装(Vue项目) TForm表单新增动态增减表单项示例

2023-03-27 TForm表单新增动态增减表单项示例

在这里插入图片描述

一、最终效果

在这里插入图片描述

二、简介

HTML 一行代码,可实现表单输入框/日期选择/下拉选择/复选框选中等及规则校验功能

 <t-form
    :ref-obj.sync="formOpts.ref"
  	:formOpts="formOpts"
  	:widthSize="2"
  	@handleEvent="handleEvent"
    />
    <--注意:ref-obj(form校验规则相当于ref)必须要‘.sync’修饰符--!>
复制代码

三、参数配置

1、Attributes

参数说明类型默认值
refObjform 表单校验规则方法 (可以参考 elementUI Form 表单方法中的 validate)obj-
className自定义类名String-
labelPosition改变表单项 label 与输入框的布局方式(默认:right) /topString'right'
widthSize每行显示几个输入项(默认两项) 最大值 4Number2
isDynamic是否开启动态新增表单项Booleanfalse
isTrim全局是否开启清除前后空格(comp 为 el-input 且 type 不等于'password')Booleantrue
formOpts表单配置项Object{}
---listTypeInfo下拉选择数据源(type:'select'有效)Object{}
---fieldListform 表单每项 listArray[]
------isHideItem某一项不显示Booleanfalse
------slotName自定义表单某一项输入框slot-
------childSlotName自定义表单某一下拉选择项子组件插槽(el-option)slot-
------compform 表单每一项组件是输入框还是下拉选择等(可使用第三方 UI 如 el-select/el-input 也可以使用自定义组件)String-
------bind表单每一项属性(继承第三方 UI 的 Attributes,如 el-input 中的 clearable 清空功能)默认清空及下拉过滤Object{}
------isTrim是否不清除前后空格(comp 为 el-input 且 type 不等于'password')Booleanfalse
------typeform 表单每一项类型String
------widthSizeform 表单某一项所占比例(如果占一整行则设置 1)Number2
------widthform 表单某一项所占实际宽度String100%
------arrLabeltype=select-arr 时,每个下拉显示的中文String'dictLabel'
------arrKeytype=select-arr 时,每个下拉显示的中文传后台的数字String'dictValue'
------labelform 表单每一项 titleString-
------labelRender自定义某一项 titlefunction-
------valueform 表单每一项传给后台的参数String-
------rules每一项输入框的表单校验规则Object/Array-
------list下拉选择数据源(仅仅对 type:'select'有效)String-
------event表单每一项事件标志(handleEvent 事件)String-
------eventHandle继承 comp 组件的事件(返回两个参数,第一个自己自带,第二个 formOpts)Object-
---formData表单提交数据(对应 fieldList 每一项的 value 值)Object-
---labelWidthlabel 宽度String120px
---rules规则(可依据 elementUI el-form 配置————对应 formData 的值)Object/Array-
---operatorList操作按钮 listArray-

2、Events

事件名说明返回值
handleEvent单个查询条件触发事件fieldList 中 type/查询条件输入的值/fieldList 中 event 值

3、Methods

事件名说明参数
resetFields重置表单-
clearValidate清空校验-

四、组件地址

gitHub组件地址

gitee码云组件地址

五、相关文章

基于ElementUi再次封装基础组件文档


vue+element-ui的table组件二次封装


分类:
前端