前端文档TForm 表单组件
基础用法
继承 Element-plus 组件的事件使用
el-input 去除前后空格（type=password 除外）
对齐方式
每行展示多少项
表单校验规则
自定义 label jsx 渲染
输入框插槽使用
文本展示
结合自己封装组件使用
赋值回显数据
密码在新增显示，编辑不显示
TForm 参数配置
1. 简介：基于 Element-plus Form 表单组件的二次封装，着重于数据层面，HTML 一行代码
TForm 表单组件 代码示例：
html
<t-form
v-model="formOpts.ref"
:formOpts="formOpts"
:widthSize="2"
@handleEvent="handleEvent"
/>
//注意formOpts.ref(t-form组件实例相当于vue2 ref)需要要v-model接收<t-form
v-model="formOpts.ref"
:formOpts="formOpts"
:widthSize="2"
@handleEvent="handleEvent"
/>
//注意formOpts.ref(t-form组件实例相当于vue2 ref)需要要v-model接收2. 配置参数
| 参数 | 说明 | 类型 | 是否必须 |
|---|---|---|---|
| className | 自定义类名 | String | - |
| labelPosition | 改变表单项 label 与输入框的布局方式(默认：right) /top | String | right |
| widthSize | 每行显示几个输入项（默认两项） 最大值 4 | Number | 2 |
| 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/funnction | - |
| ------isTrim | 是否不清除前后空格(comp 为 el-input 且 type 不等于'password') | Boolean | false |
| ------type | form 表单每一项类型 | String | - |
| ------widthSize | form 表单某一项所占比例(如果占一整行则设置 1) | Number | - |
| ------width | form 表单某一项所占实际宽度 | String | - |
| ------arrLabel | type=select-arr 时，每个下拉显示的中文 | String | label |
| ------arrKey | type=select-arr 时，每个下拉显示的中文传后台的数字 | String | key |
| ------label | form 表单每一项 title | String | - |
| ------labelRender | 自定义某一项 title | function | - |
| ------value | form 表单每一项传给后台的参数 | String | - |
| ------rules | 每一项输入框的表单校验规则 | Object/Array | - |
| ------list | 下拉选择数据源（仅仅对 type:'select'有效） | String | - |
| ------event | 表单每一项事件标志（即是：handleEvent 事件第一个参数值） | String | - |
| ------eventHandle | 继承 comp 组件的事件 | Object | - |
| ---formData | 表单提交数据(对应 fieldList 每一项的 value 值) | Object | - |
| ---labelWidth | label 宽度 | String | 120px |
| ---rules | 规则（可依据 elementUI el-form 配置————对应 formData 的值） | Object/Array | - |
| ---operatorList | 操作按钮 list | Array | - |
3. events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| handleEvent | 单个查询条件触发事件 | fieldList 中 type/查询条件输入的值/fieldList 中 event 值 |
4. Methods 继承 element-plus 的 methods
| 事件名 | 说明 | 返回值 |
|---|---|---|
| selfValidate | 自定义校验 | valid:Boolean;formData:object |