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
参数 | 说明 | 类型 | 默认值 |
---|
refObj | form 表单校验规则方法 (可以参考 elementUI Form 表单方法中的 validate) | obj | - |
className | 自定义类名 | String | - |
labelPosition | 改变表单项 label 与输入框的布局方式(默认:right) /top | String | 'right' |
widthSize | 每行显示几个输入项(默认两项) 最大值 4 | Number | 2 |
isDynamic | 是否开启动态新增表单项 | Boolean | false |
isTrim | 全局是否开启清除前后空格(comp 为 el-input 且 type 不等于'password') | Boolean | true |
formOpts | 表单配置项 | Object | {} |
---listTypeInfo | 下拉选择数据源(type:'select'有效) | Object | {} |
---fieldList | form 表单每项 list | Array | [] |
------isHideItem | 某一项不显示 | Boolean | false |
------slotName | 自定义表单某一项输入框 | slot | - |
------childSlotName | 自定义表单某一下拉选择项子组件插槽(el-option) | slot | - |
------comp | form 表单每一项组件是输入框还是下拉选择等(可使用第三方 UI 如 el-select/el-input 也可以使用自定义组件) | String | - |
------bind | 表单每一项属性(继承第三方 UI 的 Attributes,如 el-input 中的 clearable 清空功能)默认清空及下拉过滤 | Object | {} |
------isTrim | 是否不清除前后空格(comp 为 el-input 且 type 不等于'password') | Boolean | false |
------type | form 表单每一项类型 | String | 是 |
------widthSize | form 表单某一项所占比例(如果占一整行则设置 1) | Number | 2 |
------width | form 表单某一项所占实际宽度 | String | 100% |
------arrLabel | type=select-arr 时,每个下拉显示的中文 | String | 'dictLabel' |
------arrKey | type=select-arr 时,每个下拉显示的中文传后台的数字 | String | 'dictValue' |
------label | form 表单每一项 title | String | - |
------labelRender | 自定义某一项 title | function | - |
------value | form 表单每一项传给后台的参数 | String | - |
------rules | 每一项输入框的表单校验规则 | Object/Array | - |
------list | 下拉选择数据源(仅仅对 type:'select'有效) | String | - |
------event | 表单每一项事件标志(handleEvent 事件) | String | - |
------eventHandle | 继承 comp 组件的事件(返回两个参数,第一个自己自带,第二个 formOpts) | Object | - |
---formData | 表单提交数据(对应 fieldList 每一项的 value 值) | Object | - |
---labelWidth | label 宽度 | String | 120px |
---rules | 规则(可依据 elementUI el-form 配置————对应 formData 的值) | Object/Array | - |
---operatorList | 操作按钮 list | Array | - |
2、Events
事件名 | 说明 | 返回值 |
---|
handleEvent | 单个查询条件触发事件 | fieldList 中 type/查询条件输入的值/fieldList 中 event 值 |
3、Methods
事件名 | 说明 | 参数 |
---|
resetFields | 重置表单 | - |
clearValidate | 清空校验 | - |
四、组件地址
gitHub组件地址
gitee码云组件地址
五、相关文章
基于ElementUi再次封装基础组件文档
vue+element-ui的table组件二次封装