> #### 2023-08-04 TForm表单可以集成`自己封装含有下拉框组件`的使用 > > ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/16909b62bdad4a9b80385f84db90a72f~tplv-k3u1fbpfcp-zoom-1.image) ## 一、最终效果 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b2a4e6e96c349328005319e97d9d757~tplv-k3u1fbpfcp-zoom-1.image) ## 二、简介 > HTML 一行代码,可实现表单输入框/日期选择/下拉选择/复选框选中等及规则校验功能 ```html <--注意: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 | - | | ------isSelfCom | 是否使用自己封装的组件（TSelect等---含有下拉框） | Boolean | false | | ---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 | 清空校验 | - | ## 四、源码 ```html ``` ## 五、组件地址 [gitHub组件地址](https://github.com/wocwin/t-table) [gitee码云组件地址](https://gitee.com/wocwin/t-ui) ## 六、相关文章 [基于ElementUi再次封装基础组件文档](https://wocwin.github.io/t-ui/) *** [vue+element-ui的table组件二次封装](https://blog.csdn.net/cwin8951/article/details/104479606) ***