TForm 表单组件
基础用法
继承 Element-plus 组件的事件使用
el-input 去除前后空格（type=password 除外）
对齐方式
每行展示多少项
表单校验规则
自定义 label jsx 渲染
输入框插槽使用
文本展示
结合自己封装组件使用
赋值回显数据
联动选择
动态显示隐藏表单项 v1.4.15
弹窗动态显示表单项
操作按钮插槽显示
操作按钮render渲染 v1.4.12
操作按钮动态显示&隐藏 v1.4.12
TForm 参数配置
1. 简介：基于 Element-plus Form 表单组件的二次封装，着重于数据层面，HTML 一行代码
TForm 表单组件 代码示例：
html
<t-form v-model="formOpts.ref" :formOpts="formOpts" :widthSize="2" @handleEvent="handleEvent" /><t-form v-model="formOpts.ref" :formOpts="formOpts" :widthSize="2" @handleEvent="handleEvent" />2. 配置参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| className | 自定义类名 | String | - |
| labelPosition | 改变表单项 label 与输入框的布局方式(right,left,top) | String | '' |
| widthSize | 每行显示几个输入项（默认两项） 最大值 6 | Number | 2 |
| isTrim | 全局是否开启清除前后空格(comp 为 el-input 且 type 不等于'password') | Boolean | true |
| formOpts | 表单配置项 | Object | - |
| ---ref | 当前TForm实例 | Object | - |
| ---labelPosition | 改变表单项 label 与输入框的布局方式(默认：right) /top （优先展示组件labelPosition） | String | right |
| ---listTypeInfo | 下拉选择数据源（type:'select'有效） | Object | - |
| ---fieldList | form 表单每项 list | Array | - |
| ------isHideItem | 动态显示隐藏某一项;function时传出formData | Boolean /function | false |
| ------slotName | 自定义表单某一项输入框 | slot | - |
| ------childSlotName | 自定义表单某一下拉选择项子组件插槽（el-option） | slot | - |
| ------comp | 表单每一项组件名称（可使用第三方 UI 如 el-select/el-input 也可以使用自定义组件） | String/components | - |
| ------bind | 继承第三方 UI 的 Attributes,function 传出 formData | Object/funnction | - |
| ------isSelfCom | 是否使用自己封装的组件（即不需要嵌套 el-option 等） | Boolean | false |
| ------isTrim | 是否不清除前后空格(comp 为 el-input 且 type 不等于'password') | Boolean | false |
| ------type | 某一项类型 | String | - |
| ------widthSize | form 表单某一项所占比例(如果占一整行则设置 1) | Number | - |
| ------width | form 表单某一项所占实际宽度 | String | - |
| ------arrLabel | type=select-arr/radio/checkbox 时，每个下拉显示的中文 | String | label |
| ------arrKey | type=select-arr/radio/checkbox时，每个下拉显示的中文传后台的数字 | String | key |
| ------label | form 表单每一项 title | String | - |
| ------labelRender | 自定义某一项 title | function | - |
| ------labelSlotName | 自定义某一项 title（插槽名：就是 labelSlotName 值 | slot | - |
| ------value | form 表单每一项传给后台的参数 | String | - |
| ------rules | 每一项输入框的表单校验规则（可参考 element-plus el-form-item方式配置） | Object/Array | - |
| ------list | 下拉选择数据源（仅仅对 type:'select'有效） | String | - |
| ------event | 表单每一项事件标志（即是：handleEvent 事件第一个参数值） | String | - |
| ------eventHandle | 继承 comp 组件的事件 | Object | - |
| ------ref | 当前使用组件的 ref 标识（可以通过 getRefs 事件返回） | String | - |
| ---formData | 表单提交数据(对应 fieldList 每一项的 value 值) | Object | - |
| ---labelWidth | label 宽度 | String | 120px |
| ---rules | 校验规则（可参考 element-plus el-form 方式配置） | Object/Array | - |
| ---btnSlotName | 操作按钮插槽命名 | String | - |
| ---operatorList | 操作按钮 list | Array | - |
| -----bind | 继承 el-button 所有 Attributes | Object | {type:'primary',size:'small'} |
| -----fun | 事件名 | function | - |
| -----isHideBtn1.4.12 | 是否隐藏按钮 | Boolean | false |
| -----render1.4.12 | render函数 | function | - |
3. events 继承 element-plus el-form 的 events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| handleEvent | 单个查询条件触发事件 | fieldList 中 type/查询条件输入的值/fieldList 中 event 值 |
| getRefs | 获取 TForm 使用组件的 ref | fieldList 中 最好需要传 ref 标识来区分是哪个组件的 ref |
4. Methods 继承 element-plus el-form 的 methods
| 事件名 | 说明 | 返回值 |
|---|---|---|
| selfValidate | 自定义校验 | valid:Boolean;formData:object |
| selfResetFields | 自定义重置方法（主要清空使用 TSelectTable 组件） | - |