quick-form表单生成组件配置说明
quick-form Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label-width | label每项宽度 | string | --- | 150px |
| label-position | label对齐方式 | string | right/left/top | right |
| fields | 表单配置项，具体看下方说明 | Array | --- | --- |
| showScanTypeBtn | 是否显示浏览模式切换按钮 | Boolean | true,false | false |
| showFoldBtn | 是否显示收起、展开按钮 | Boolean | true,false | false |
| textModelColonVisible | 是否显示表单文字名称后的冒号 | Boolean | true,false | false |
| data | 表单数据回显，自动过滤表单配置没有的key的属性 | Object | --- | {} |
| allDisabled | 全部表单元素禁用 | Boolean | true,false | false |
| borderForm | 是否给表单显示border 外框，包含区块外侧有一个 boder，以及区块标题的灰色背景 | Boolean | true,false | true |
| textModel | 文字模式。不显示表单组件，而是只显示纯文字内容,且会隐藏label 左边的星号 | Boolean | true,false | right |
| borderForm | 是否给表单显示border 外框，包含区块外侧有一个 boder，以及区块标题的灰色背景 | Boolean | true,false | true |
| formItemCol | 自定义表单每个要素的列，如果是 6 则为 一行 4 列，12 则为 1 行 2 列。如果为 0，则使用表单要素本身的设置，优先级高于表单要素本身的设置 | Number, String | --- | 0 |
quick-form Methods
| 方法 | 说明 | 参数 |
|---|---|---|
| setElementDisable | 设置某个要素禁用参数为key和是否禁用，默认true禁用，设置false取消禁用 | Function(key:string,beDisable:boolean = true) |
| setElementHidden | 设置某个要素隐藏，默认true隐藏，设置false取消隐藏 | Function(key:string,beHidden:boolean = true) |
| setElementRequired | 设置某个要素必填，默认true必填，设置false取消必填 | Function(key:string,beRequired:boolean = true) |
| clearValidate | 清空校验信息 | --- |
| resetFields | 重置表单数据 | --- |
| updateFormData | 更新表单数据，参数为object,key匹配表单里的要素 | --- |
quick-form Events
| 方法 | 说明 | 回调参数 |
|---|---|---|
| updateValue | 任一表单项数据变化后会触发回调 | 表单项data对象 |
fields
说明：一个fields可包含多个区块，每个区块下面为一个展示块区域。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 表单名称 | string | --- | --- |
| class | 表单自定义样式,参数是对象，Key为需要添加的表单class样式，value为true | Object | --- | --- |
| style | 表单行内样式 | Object | --- | {} |
| children | 具体的表单项配置数组 | Array | --- | [] |
fields children
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| key | 表单项名称，也就是我们表单提交的那个key | string | --- | --- |
| type | 表单类型，支持常用的elementui的表单组件 | 文本框(input)，日期选择器(date-input),日期时间选择器(date-input-time),小时分钟输入框(hour-minute-input),日期范围输入框(date-range-input),下拉框(normal-select),普通数字输入框(normal-select),千分位数字输入框(number-input),动态下拉输入框(auto-complete-input),单选框(radio),多行文本框(textarea),多选框(checkbox),插槽(slot),独立插槽(slot-single) | --- | --- |
| label | 表单项名称 | string | --- | --- |
| disableDefault | 表单是否默认禁用 | boolean | true,false | --- |
| defaultValue | 表单默认值 | any | --- | --- |
| isText | 表单是否以文本展示 | boolean | true,false | --- |
| span/size | 单个要素的列宽 | number | --- | 12 |
| rules | 表单项校验,具体可参考element form表单校验 | array | --- | --- |
| placeholder | 表单提示 | string | --- | --- |
| valueLink | 表单项联动规则配置，数组对象，value为表单项的值，linkList为需要动态改变的表单项的值或者其他操作 | array | --- | --- |
| style/class | 表单项样式 | Object | --- | --- |
| onFocus,onBlur | 获取、失去焦点事件 | Function(e,data) | --- | --- |
