@zhangqingcq/plug-r-qw

## formR 表单组件，支持 formData 属性定义结构，formRules 定义规则，submit 方法提交收集到的数据，全局 UI 组件，直接用 ### 属性 - formData 数组，表单结构数据，如： ``` [ { type: 'input', key: 'name', label: '名称' } ] ``` 注意：从@zhangqingcq/plug-r-qw@1.3.0开始，formData 支持二维数组，为`分组表单`（单个表单内部表单项有分组，用于支持表单项布局和样式控制）结构数据，如： ``` [ [ { type: 'input', key: 'name', label: '姓名' }, { type: 'input', key: 'sex', label: '性别' } ], [ { type: 'input', key: 'post', label: '应聘岗位' }, { type: 'input', key: 'pay', label: '期望薪资' } ] ] ``` 这是一个表单，但是内部表单项可以分为“基本信息”和“应聘信息”两组，并在布局和样式上进行区分，具体可参考库内示例项目`formTeam`。 - formRules 对象，表单验证数据，如： ``` { name: { required: true } } ``` - showMessage 布尔对象，是否显示校验信息，默认：`true` - labelWidth 数字，表单项标签宽度，默认：`160` - contentWidth 字符串，表单项内容宽度，默认：`'70%'` - itemWidth 数字，表单项内容宽度，用于行内表单，默认：`200` - inline 布尔对象，是否为行内表单，默认：`false` - teamClass 字符串，分组表单-组容器的 class，用于布局和样式控制，默认：`formTeamBox` - showLongOkBt 布尔对象，是否展示长确定按钮，默认：`false` - longOkBtTxt 字符串，长确定按钮内容，默认：`'确定'` - showInlineOkBt 布尔对象，是否展示行内短确定按钮，默认：`false` - inlineOkBtTxt 字符串，短确定按钮内容，默认：`'确定'` - showInlineClearBt 布尔对象，是否展示行内短清空按钮，默认：`false` - inlineClearBtTxt 字符串，短清空按钮内容，默认：`'清空'` - btnLoading 布尔对象，提交按钮显示 loading，默认：`false` - trim 布尔对象，提交数据时是否去掉数据中字符串的首尾空格，默认：`true` - disabled 布尔对象，禁用整个表单，比如仅需要展示时，默认：`false` ### 事件 - on-submit 表单被提交，返回表单收集的数据 - on-item-change 表单项的值改变，返回对象，包含事件对象和改变的数据 - on-options-request-back 远程选项拉取接口数据回来后emit事件，返回当前组件结构数据副本和formR的valGroup副本，以便用户实现相关逻辑 - on-reset 表单被重置，清空按钮被点击时或主动调用重置方法时触发 - on-re-render 表单被重新渲染 ### 方法 - resetForm 重置表单，会清空表单值并刷新表单 dom，异步方法，表单项默认值不会被清除 - reRenderForm 重新渲染表单，异步方法 - refreshFormDom 刷新表单 dom，异步方法 - setItemToValGroup 设置表单项的值，可添加新字段，例如添加隐藏字段，需要提交这个值，但页面不展示，valGroup 为 formR 组件私有属性，不可直接操作，故有该方法 - updateValGroup 更新表单项的值，只能更新已有字段，valGroup 为 formR 组件私有属性，不可直接操作，故有该方法，传参示例 1：`{info:'我是新的提示信息',name:'王五',...}` - updateFormDataT 更新表单结构，例如设置或取消禁用,或者给 type 为 txt 的表单项（没有 key）赋值，formDataT 为 formR 组件私有属性，不可直接操作，故有该方法； > 参数为一个对象（改变单个）或数组（改变多个），支持的属性： > > - index-必填-需要改变的formData项的索引值 > - indexB-当表单为`分组表单`时必填（表示表单项的二位数组索引第二位） > - 需要改变的属性 > - 如要改变第二个表单组件的label和title, 则为:`{index:1,label:XXX,title:XX}`。 > - 注意：带选项的组件`changeOption`属性为`true` 时，不要调用该方法改变formR内部optionUrl，而应该直接在外面改变绑定到formData的数组对应子项的optionUrl.value - reValidate 手动验证表单项 - validate 主动验证整个表单 - getValGroup 获取用户已填数据，和 submit 有显著区别，submit 会校验表单，并提交 on-submit 事件。 - changeLoading 主动改变表单提交按钮 loading 状态，在开启 btnLoading 的前提下 - submit 触发提交事件，一般不需要调用，会通过组件内部提交按钮触发 ### 注意 - 不要调用组件私有方法，除非你非常清楚调用不会导致未知错误 - 组件的 formData 属性和 formRules 属性并非响应式，如果改变了这两个属性，可以调用 reRenderForm 方法重新渲染组件 - 在 formData 和 formRules 没有变化的情况下，只需要调用 resetForm 方法即可重置组件 - 在某些情况下，如更改了 formRules，但又不想重新渲染组件（要保留用户操作等），验证信息等不会更新，只需要调用 refreshFormDom 方法刷新 dom (不要调用 validate，否则会发生如后面没填的必填项都会变红等非预期表现) - 组件除了 props 里的属性，formData 还支持丰富的配置，具体用法可以参考示例 - 短按钮和长按钮不要同时开启 ### formData 元素支持字段说明（按字母升序） - <a name='activeChange'>activeChange</a> 布尔对象，InputNumber（数字输入框）是否实时响应数据，设置为`false` 时，只会在失焦时更改数据，默认:`false` - <a name='addTime'>addTime</a> 布尔对象，DatePicker 不选择时间（只选日期）时，但提交时需要带上时间，给该字段赋值`true` ,会自动加上 `00:00:00`，如果是区间，开始时间加`00:00:00`，结束时间加`23:59:59`，默认:`false` - <a name='append'>append</a> 字符串，type 为 input 的表单项输入框头部内容。 - <a name='asyncOption'>asyncOption</a> 布尔对象，有选项的表单项的待选项数据来源于接口，需配合[optionUrl](#optionUrl) 使用，默认:`false` - <a name='autosize'>autosize</a> 对象，自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }，默认:`{minRows:2}` - <a name='booleanVal'>booleanVal</a> 布尔对象，是否为布尔值，当需要表单项为布尔值时，给该字段赋值`true` ，该表单项可接受布尔值，提交时提交布尔值，注意：需要表单项类型支持（目前仅 select 单选和 radioGroup 支持），具体见后面的' type说明 '，默认：`false` - <a name='borrowOption'>borrowOption</a> 字符串，有待选项的表单项，待选项数据来自另一表单项的待选项时（借用），需给该字段赋值另一表单项的 key 对应的值 - <a name='buttonType'>buttonType</a> 布尔对象，RadioGroup 是否为按钮样式，按钮样式即为一排连在一起的按钮，默认：`false` - <a name='changeOnSelect'>changeOnSelect</a> 布尔对象，当此项为 true 时，点选每级菜单选项值都会发生变化，默认：`false` - <a name='changeOption'>changeOption</a> 布尔对象/对象/数组 > - 布尔对象：有待选项的表单项，待选项数据从接口拉取时，拉取地址[optionUrl](#optionUrl)会改变，给该字段赋值 `true` ，需要改变时直接改变`optionUrl`即可（该场景下直接改变绑定到formData的数组中对应的optionUrl就行，不要调用updateFormDataT改变formR内部optionUrl, updateFormDataT在此处不适用，详细使用方法见该库示例）； > - 对象：如果地址有的查询条件是另一表单项的值，则给该字段赋值对象，如： `{valKey:'name',key:'user'}` 表示其中一个查询条件是`&user=name表单项的值`，name表单项值改变，optionUrl就会自动改变，就会重新拉取待选项数据； > - 数组：如果有多个这种条件，用数组存放他们，如：`[{valKey...},{...}]` ，多个条件必须都有值才会发起请求，如果某条件可有可无（有值就带上，没有就不要该条件），则设置该条件`notRequired` 属性为`true` - <a name='class'>class</a> 字符串，表单项自定义样式类名，可用于自定义单个 formItem 独有样式，如果想传多个 class，class 之间用空格隔开，所有 type 类型皆支持该属性 - <a name='clearable'>clearable</a> 布尔对象，表单项是否可单独清空，当类型支持时才有效，具体见后面的' type说明 '，默认：`true` - <a name='collectLabel'>collectLabel</a> 对象/数组，选项中除 val 外的其他字段（如label）连同值一并返回，如： `collectLabel:{valKey:'label',key:'name'}`，表示表单被提交时，该表单项选中项的 label 会以 name 被一起提交出去。 - <a name='data'>data</a> 对象，uploadGroup 远程上传时，一并携带的参数（除了文件） - <a name='dateType'>dateType</a> 字符串，DatePicker的日期格式，可选值：date、daterange、datetime、datetimerange、year、month，如：`dateType:'daterange'`，注意：为区间时，需给 2 个 key，如：`key:'start',key2:'end'` - <a name='dateOptions'>dateOptions</a> 对象，DatePicker 选择器额外配置，比如不可选日期与快捷选项，如： ``` dateOptions: { disabledDate(date) { return date && date.valueOf() < Date.now() - 86400000 } } ``` - <a name='defaultVal'>defaultVal</a> 表单项的默认值，组件第一次渲染时会带上该值并在 UI 上回显，不是所有类型都支持该字段，具体见后面的'type说明' - <a name='defaultVal2'>defaultVal2</a> 另一个默认值，原理同[key2](#key2)，对应的也会有 defaultVal3 等 - <a name='disabled'>disabled</a> 布尔对象，禁用表单项，因为 formData 非响应式，自然该字段也非响应式，注意：这和组件 props 中 disabled 不是同一个，默认：`false` - <a name='disableOptionByOthers'>disableOptionByOthers</a> 字符串/数组，根据其他表单项的值禁用待选项， > - 例如：表单中有一个下拉框的 key 为 fruit，目标表单项（如这里的 fruit）待选项和当前表单项（设置 disableOptionByOthers 的表单项）待选项一样，`disableOptionByOthers:'fruit'` 表示 fruit 下拉框已选的选项，当前表单项不可再选（选项被禁用），当然目标表单项 type 不是非得 select，逻辑上只要当前表单项待选项的值和目标表单项的值相等，待选项就会被禁用； > - 如果有多个条件，用数组存放他们，如：`disableOptionByOthers:['fruit','fruitB']` - <a name='editable'>editable</a> 布尔对象，InputNumber（数字输入框）是否可编辑，为`false`时,只能通过 UI操作，不能通过光标修改，默认：`true` - <a name='editorConfig'>editorConfig</a> 对象，编辑器配置，参考[wangEditor5 编辑器配置](https://www.wangeditor.com/v5/editor-config.html) - <a name='filterable'>filterable</a> 布尔对象，是否支持筛选待选项，有的类型默认为真，有的为假，具体见后面的' type 说明' - <a name='format'>format</a> 数组，uploadGroup 支持的格式，不限制的话不用设置该字段，如：`['jpg','png']` - <a name='formatB'>format（date 组件）</a> 字符串，指定 date 组件返回日期格式，无特殊需求时可不传，组件有对应的默认格式，常用值： `'YYYY'、'MM'、'YYYY-MM-DD'、'YYYY-MM-DD HH:mm:ss'`，具体参考 Moment.js 官网 - <a name='formatC'>format（time 组件）</a> 字符串，指定 time 组件返回日期格式及操作界面维度，无特殊需求时可不传，组件有对应的默认格式，常用值： `'HH:mm:ss'、'HH:mm'、'HH'` - <a name='height'>height</a> 正数/字符串，富文本编辑器 Pro 编辑区域高度，默认：`300` - <a name='icon'>icon</a> 字符串，输入框尾部图标 - <a name='info'>info</a> 字符串，表单项的提示文字，位于表单项下面，一般为蓝色（在没自定义对应主题颜色时） - <a name='inputType'>inputType</a> 字符串，表单项 type=input 时，可指定输入框类型(开启 password=true 时，inputType 自动变为 password)，可选值同 h5 原生 input 的 type，以页面实际表现为准，不同值使用可靠性需自己验证，默认值：`'text'` - <a name='itemBorder'>itemBorder</a> 布尔对象，RadioGroup 选项是否带边框，默认：`false` - <a name='key'>key</a> 字符串，表单被提交时该项收集的数据所在字段，如：`{type:'input',key:'name'}`,用户输入`'Ricky'` ，提交时返回 `{name:'Ricky'}` - <a name='key2'>key2</a> 字符串，除 key 以外的另一要收集的数据，如时间区间，key 为起始，key2 为终止，以此类推，如果有三个数据，则有 key3 等 - <a name='label'>label</a> 字符串，表单项标签 - <a name='length'>length</a> 数字，uploadGroup 支持上传文件的个数限制，不限制则不设置 - <a name='level'>level</a> 数字，层级，表单项特殊配置，如行政区域级联，具体见后面的' type 说明' - <a name='likeInput'>likeInput</a> 布尔对象，表单项右侧区域模拟 input 样式，只有 type 为 txt 时有效，默认：`false` - <a name='localOption'>localOption</a> 数组，表单项待选项为远程拉取时，使用该属性可设置固定的本地选项，排在远程选项前面 - <a name='manualUpload'>manualUpload</a> 布尔对象，uploadGroup 手动上传（本地上传，采集 file 对象），默认：`false` - <a name='mapHeight'>mapHeight</a> 字符串，inputMap 的地图高度，默认值：`'250px'` - <a name='max'>max</a> 数字，表单项最大值，需要类型支持时才生效 - <a name='maxLength'>maxLength</a> 数字，表单项值最大长度，需要类型支持时才生效 - <a name='maxSize'>maxSize</a> 数字，uploadGroup 支持上传的文件大小限制，不限制则不设置，注意不要带单位，默认单位 kb - <a name='min'>min</a> 数字，表单项允许最小值，需要类型支持时才生效 - <a name='mode'>mode</a> 字符串，`'default'` 默认模式 - 集成了 wangEditor 所有功能；`'simple'` 简洁模式 - 仅有部分常见功能，但更加简洁易用，默认：`'simple'` - <a name='multiple'>multiple</a> 布尔对象，select 是否支持多选；upload 选择文件时是否支持多选，多选时无法限制可传文件个数（用户第一次选择文件时想选多少个是限制不了的），建议多选和限制可传文件个数功能二选一，不要同时开启，默认：`false` - <a name='numberVal'>numberVal</a> 布尔对象，表单项收集的值自动转换为`number`类型，需是类似`number`的字符串才能转( 如：`'32.2'`、`'-13.9'`)，否则收集的值为字符串，默认：`false` - <a name='onlyLastVal'>onlyLastVal</a> 布尔对象，只返回最后一级的值，表单项特殊配置，如远程数据级联，具体见后面的' type说明'，默认： `true` - <a name='onlyLastLabel'>onlyLastLabel</a> 布尔对象，只显示最后一级的 label，表单项特殊配置，如远程数据级联，具体见后面的' type 说明'，默认：`true` - <a name='options'>options</a> 数组，有待选项的表单项，待选项数据存放在该字段下，[详细说明](#optionsDetail) ，如： `{type:'select',key:'sex',options:[{label:'男',val:1},{label:'女',val:0}]}` - <a name='optionFilter'>optionFilter</a> Function，筛选待选项的方法，入参是接口请求回来的待选项数据（不包含本地选项），返回处理后的待选项，如： ``` { ..., optionFilter(d){return d?.filter?.(e => e && e.id !== 3)}, ... } ``` - <a name='optionLabel'>optionLabel</a> 字符串/数组，有待选项的表单项，待选项数据从接口拉取时，待选项 label对应接口数据的字段名，如： `optionLabel:'name'`；如果选项标签需要展示多个字段，则用数组存放他们，第一字段直接展示，后面字段括号内展示，括号紧跟第一字段。 - <a name='optionUrl'>optionUrl</a> 字符串，有待选项的表单项，待选项数据从接口拉取时，接口地址放在该字段下，需配合 [asyncOption](#asyncOption)、[optionLabel](#optionLabel)、[optionVal](#optionVal) 使用，注意：请求方式为 get，且不可更改;接口返回数据需为指定格式： ``` //第一种 { data: [{name:'Jay',id:2},...], ... } //第二种 { data:{ records: [{name:'Jay',id:2},...] }, ... } //第三种 [ {name:'',id:2}, ... ] ``` - <a name='optionVal'>optionVal</a> 字符串，有待选项的表单项，待选项数据从接口拉取时，待选项 val 对应接口数据的字段名，如：`optionVal:'id'` - <a name='password'>password</a> 布尔对象，是否显示切换密码图标，仅 input 支持，开启该属性输入框 clearable 自动变为 false，默认：`false` - <a name='placeholder'>placeholder</a> 字符串，表单项占位符，不是所有类型都支持该字段，具体见后面的'type 说明' - <a name='precision'>precision</a> 数字，InputNumber（数字输入框）的精度，即小数位数 - <a name='prefix'>prefix</a> 字符串，输入框头部图标 - <a name='prepend'>prepend</a> 字符串，type 为 input 的表单项输入框尾部内容。 - <a name='readonly'>readonly</a> 布尔对象，InputNumber（数字输入框）只读，和 disabled 效果类似，样式不一样，默认：`false` - <a name='separator'>separator</a> 字符串，label 分隔符，默认：`'/'` - <a name='show'>show</a> 对象/数组/回调函数，表单项显示设置，[详细说明](#showDetail) > - 如：`{key:'name',val:['Ricky','Tom']}`，表示只在 name 为 Ricky 或 Tom 时显示该表单项； > - 如果有多个条件，用数组装这些条件对象，如：`[{key,val...},{...}]`，它们的关系为且，即所有条件都满足才显示； > - 如果需要条件关系为或，给表单项[showOr](#showOr)赋值`true`； > - 当给定格式的对象或数组不能满足业务需求时，可传一个回调函数，函数参数为`FormR`的`valGroup` ，回调函数需要有返回值，当返回值为真时，表单项展示，返回值为假时，表单项隐藏，如：`{show:valGroup => valGroup?.name === 'Ricky'}`。 - <a name='showImg'>showImg</a> 布尔对象，uploadGroup 是否以图片方式显示已上传的图片文件，默认：`false` - <a name='showMap'>showMap</a> 布尔对象，inputMap 是否显示地图，默认：`true` - <a name='showOr'>showOr</a> 布尔对象，表单项各显示条件间关系为或运算，默认：`false` - <a name='showWordLimit'>showWordLimit</a> 布尔对象，是否显示输入字数统计，可以配合 maxlength 使用，默认：`false` - <a name='slotName'>slotName</a> 字符串，type 为 custom、input 的插槽名字，具体见后面的' type 说明' - <a name='slotPosition'>slotPosition</a> 字符串，type 为 input 的插槽位置，如：`prepend`、`append` ，目前只支持这两个值，具体可参考示例项目的`formTeam`示例 - <a name='step'>step</a> 数字，InputNumber（数字输入框）的步长，即每次点表单项箭头增大或减小的值，可以是小数 - <a name='steps'>steps</a> 数组，timePicker 选择器下拉列表的时间间隔，数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时，分钟会显示：00、15、30、45。默认值：`[]` - <a name='suffix'>suffix</a> 字符串，输入框尾部图标 - <a name='title'>title</a> 字符串，表单项的标题，位于表单项左上方，样式见示例 - <a name='toolbarConfig'>toolbarConfig</a> 对象，工具栏配置，参考[wangEditor5 工具栏配置](https://www.wangeditor.com/v5/toolbar-config.html) - <a name='type'>type</a> 字符串，表单项类型，支持：txt、input、inputNumber、select、selectInput、alCascader、asyncCascader、radio、radioGroup、checkbox、checkboxGroup、textarea、upload、date、time、monthRange、editor、editorPro、inputMap、custom - <a name='url'>url</a> 字符串，数据接口地址，表单项特殊配置，如远程数据级联，文件上传时为上传文件的服务器接口地址，具体见后面的' type 说明' - <a name='val'>val</a> 表单项值，只有 type 为 txt 时有效 - <a name='valKey'>valKey</a> 字符串，表单项值为表单中另外一个表单项（兄弟项）收集数据中的一个字段，只有 type 为 txt 时有效，具体用法见后面的' type 说明' - <a name='withCredentials'>withCredentials</a> 布尔对象，uploadGroup 远程上传时是否携带 cookie，默认：`true` - <a name='uploadImgMaxSize'>uploadImgMaxSize</a> 数字，限制上传图片大小，editor 组件独有属性，默认：102400(100k) - <a name='uploadImgMaxLength'>uploadImgMaxLength</a> 数字，限制一次最多能传几张图片，editor 组件独有属性，默认：10 - <a name='uploadImgShowBase64'>uploadImgShowBase64</a> 布尔对象，是否使用 base64 作为本地图片上传保存方式，editor 组件独有属性，默认：true - <a name='uploadImgServe'>uploadImgServe</a> 对象，具体参考[editor](../editor/README.md)组件的 README.md 文档，editor 组件独有属性 ### formData 元素字段详细说明 #### <a name='optionsDetail'>options</a> - label 字符串，待选项标签，即用户看到的 - val 字符串/数字，待选项的值，即需要收集的， > - 注意：若为数字，如果有验证，验证规则中需要加上`type:'number'`，view-design默认验证类型为string； > - 若表单项值为 boolean，需配合`booleanVal:true` 使用，该字段还是数字（因为如 radioGroup 和 select 的选项不支持 boolean），一般用`1`和`0`，提交表单项时组件会自动将其转为 boolean - icon 字符串，待选项的图标，仅 checkbox 和 checkboxGroup 支持，view-design 的内置图标 - disabled 布尔对象，待选项是否禁用，默认：`false` #### <a name='showDetail'>show</a> - key 字符串，目标表单项（控制当前表单项是否展示的表单项）的 key，当前表单项即设置 show 属性的表单项，如：`key:'age'` - val 数组，目标表单项为哪些值时，满足条件，如：`[1,2]`表示 age 为 1 或 2 时，满足条件；该字段接受一个特殊值`'.'`，表示该条件 key 对应字段只要有有效值既满足，有效值意思是`0` `false`或转为 Boolean 结果为`true`的值 - reg 正则表达式，当 val 这个字段已经不能满足业务需求时，可用`reg`传递正则表达式（val 无需再传值），当正则表达式匹配给定 key 对应的值成功时，表单项展示，否则隐藏。 > 如：`{show:{key:'age',reg:/^2\d$/}}`，表示`age`在`20`到`29`且值为正整数时该表单项会显示。 - 注意：如果条件有多个，show 的类型变为多个条件对象组成的数组；多个条件间关系为且，如果想要为或，需设置[showOr](#showOr) 为`true` ### type 说明如果觉得下面有些字段描述太过简单，可以参考 formData 说明里该字段的描述 #### txt 纯文本 - [label](#label) 标签 - [val](#val) 值 - [valKey](#valKey) 值为另一个兄弟表单项收集的 valKey 对应的字段，响应式 - [likeInput](#likeInput) 值的样式模拟 input 样式，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [class](#class) 单个表单项的自定义样式类名 - 注意：也可以不传 label 和 val,单纯用来布局占位；没有 key 值，提交时不会被带上 #### input 输入框 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [maxLength](#maxLength) 最大长度限制，不限制则不设置 - [placeholder](#placeholder) 占位符，默认：`'请输入'` - [inputType](#inputType) 字符串，表单项 type=input 时，可指定输入框类型(开启 password=true 时，inputType 自动变为 password)，默认值：`'text'` - [password](#password) 布尔对象，是否显示切换密码图标，默认：`false` - [prepend](#prepend) 字符串，输入框头部内容 - [append](#append) 字符串，输入框尾部内容 - [slotName](#slotName) 插槽名字，自定义内容通过插槽接入输入框，如自定义单位等，名字随意取，一个 formData 里不能有重复的 slotName - [slotPosition](#slotPosition) 插槽位置，指定输入框插槽，如`'prepend','append'`等，相当于 view-design 的 input 组件 slot 名字，使用方法参考 view-design 的 input 混合型输入框文档 - [icon](#icon) 字符串，输入框尾部图标 - [prefix](#prefix) 字符串，输入框头部图标 - [suffix](#suffix) 字符串，输入框尾部图标 - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [clearable](#clearable) 表单项是否可单独清空，为 true 且输入框有值时，光标移动到输入框尾部会有小叉，点击清空，默认：`true` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### inputNumber 数字输入框 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [max](#max) 最大值限制，不限制则不设置 - [min](#min) 最小值限制，不限制则不设置 - [precision](#precision) 精度 - [step](#step) 步长 - [readonly](#readonly) 只读，默认：`false` - [editable](#editable) 可编辑，默认：`true` - [activeChange](#activeChange) 是否实时响应数据 - [placeholder](#placeholder) 占位符，默认：`'请输入'` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [clearable](#clearable) 表单项是否可单独清空，为 true 且输入框有值时，光标移动到输入框尾部会有小叉，点击清空，默认：`true` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### select 下拉选择框 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [booleanVal](#booleanVal) 表单项值为布尔类型，传入的会被自动转换成 boolean，输出也是 boolean，默认：`false` - [options](#options) 待选项 - [borrowOption](#borrowOption) 借用待选项 - [collectLabel](#collectLabel) 收集选项中其他字段（除 val 外） - [filterable](#filterable) 是否可筛选待选项，默认：`false` - [multiple](#multiple) 是否可筛选待选项，默认：`false` - [asyncOption](#asyncOption) 待选项数据来源于接口，默认：`false` - [optionUrl](#optionUrl) 待选项数据来源接口地址 - [optionLabel](#optionLabel) 待选项 label 对应接口数据的字段名 - [optionVal](#optionVal) 待选项 val 对应接口数据的字段名 - [localOption](#localOption) 数组，表单项待选项为远程拉取时，使用该属性可设置固定的本地选项，排在远程选项前面 - [optionFilter](#optionFilter) 待选项筛选方法 - [disableOptionByOthers](#disableOptionByOthers) 根据其他表单项的值禁用待选项 - [changeOption](#changeOption) 待选项数据来源于接口，接口地址是否改变 - [placeholder](#placeholder) 占位符，默认：`'请选择'` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [clearable](#clearable) 表单项是否可单独清空，为 true 且选择框有值时，光标移动到选择框尾部会有小叉，点击清空，默认：`true` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### selectInput 选择输入框 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段，如果有默认值，默认值会存放在该字段下，该表单项该字段是会随着选择框的值改变的，key改变时表单项值会自动清空 - [defaultVal](#defaultVal) 默认值 - [options](#options) 待选项 - [placeholder](#placeholder) 占位符，默认：`'请输入'` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [clearable](#clearable) 表单项是否可单独清空，为 true 且输入框有值时，光标移动到输入框尾部会有小叉，点击清空，默认：`true` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### alCascader 行政区域级联 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值，行政区域编码，如：`500103000000` - [level](#level) 行政区域级数，默认：`2`，表示到区县级；0-省级，1-市级，2-区县，该库自 1.1.37 版本以后不再支持街道选取（level:3 不再支持），因为数据来源 area-data 自 2.0 版本以后不再包含街道数据 - [changeOnSelect](#changeOnSelect) 布尔对象，当此项为 true 时，点选每级菜单选项值都会发生变化，默认：`false` - [placeholder](#placeholder) 占位符，默认：`'请输入'` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### asyncCascader 远程数据级联 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [url](#url) 节点数据接口地址 - [optionVal](#optionVal) 节点 val 对应接口数据字段 - [optionLabel](#optionLabel) 节点 label 对应接口数据字段，注意：不同于其他表单项，这里仅支持字符串 - [optionFilter](#optionFilter) 自定义待选项筛选逻辑，入参是接口请求回来的待选项数据，返回处理后的待选项（仅进行筛选操作，不要做其它处理） - [onlyLastVal](#onlyLastVal) 该字段为`true`时，只返回选中的最后一级的值，否则返回数组，数组包含每一级的值，默认：`true` - [onlyLastLabel](#onlyLastLabel) 该字段为`true`时，只显示选中的最后一级 label，否则显示每一级的 label，用分隔符隔开，默认：`true` - [filterable](#filterable) 是否支持筛选待选项，默认：`false` - [separator](#separator) 选中的 label 分隔符，显示全部 label 时生效，默认：`'/'` - [placeholder](#placeholder) 占位符，默认：`'请输入'` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### radio 单选框 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [placeholder](#placeholder) 占位符，默认：`'请输入'` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 - 注意：该类型表单项值为 boolean #### radioGroup 单选框组 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [options](#options) 待选项 - [borrowOption](#borrowOption) 借用待选项 - [collectLabel](#collectLabel) 收集选项中其他字段（除 val 外） - [asyncOption](#asyncOption) 待选项数据来源于接口，默认：`false` - [optionUrl](#optionUrl) 待选项数据来源接口地址 - [optionLabel](#optionLabel) 待选项 label 对应接口数据的字段名 - [optionVal](#optionVal) 待选项 val 对应接口数据的字段名 - [optionFilter](#optionFilter) 待选项筛选方法 - [disableOptionByOthers](#disableOptionByOthers) 根据其他表单项的值禁用待选项 - [changeOption](#changeOption) 待选项数据来源于接口，接口地址是否改变 - [booleanVal](#booleanVal) 表单项值为布尔类型，传入的会被自动转换成 boolean，输出也是 boolean，默认：`false` - [buttonType](#buttonType) 以按钮组的样式展示，默认：`false` - [itemBorder](#itemBorder) 选项带边框（不可和 buttonType 同时开启），默认：`false` - [placeholder](#placeholder) 占位符，默认：`'请输入'` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### checkbox 复选框 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [placeholder](#placeholder) 占位符，默认：`'请输入'` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [class](#class) 单个表单项的自定义样式类名 - 注意：该类型表单项值为 boolean #### checkboxGroup 复选框组 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [options](#options) 待选项 - [borrowOption](#borrowOption) 借用待选项 - [collectLabel](#collectLabel) 收集选项中其他字段（除 val 外） - [asyncOption](#asyncOption) 待选项数据来源于接口，默认：`false` - [optionUrl](#optionUrl) 待选项数据来源接口地址 - [optionLabel](#optionLabel) 待选项 label 对应接口数据的字段名 - [optionVal](#optionVal) 待选项 val 对应接口数据的字段名 - [localOption](#localOption) 数组，表单项待选项为远程拉取时，使用该属性可设置固定的本地选项，排在远程选项前面 - [optionFilter](#optionFilter) 待选项筛选方法 - [disableOptionByOthers](#disableOptionByOthers) 根据其他表单项的值禁用待选项 - [changeOption](#changeOption) 待选项数据来源于接口，接口地址是否改变 - [buttonType](#buttonType) 以按钮组的样式展示，默认：`false` - [itemBorder](#itemBorder) 选项带边框（不可和 buttonType 同时开启），默认：`false` - [placeholder](#placeholder) 占位符，默认：`'请输入'` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 - 注意：该类型表单项值为数组 #### textarea 文本框 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [maxLength](#maxLength) 最大长度限制，不限制则不设置 - [showWordLimit](#showWordLimit) 布尔对象，是否显示输入字数统计，可以配合 maxlength 使用，默认：`false` - [autosize](#autosize) 自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }，默认:`{minRows:2}` - [numberVal](#numberVal) 值转换为 number 类型 - [placeholder](#placeholder) 占位符，默认：`'请输入'` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [clearable](#clearable) 表单项是否可单独清空，为 true 且输入框有值时，光标移动到输入框尾部会有小叉，点击清空，默认：`true` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### upload 上传组件 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值，仅远程上传时支持默认值，为文件 id - [url](#url) 远程上传接口地址 - [data](#data) 远程上传接口请求参数（不包含 file 对象） - [withCredentials](#withCredentials) 远程上传接口请求是否带上 cookie，默认：`true` - [manualUpload](#manualUpload) 本地上传，采集 file 对象，默认：`false` - [format](#format) 上传文件格式限制，后缀名组成的数组，不限制则不设置 - [maxSize](#maxSize) 上传文件大小限制，单位 kb，配置时写数字，不要带单位 - [length](#length) 上传文件个数限制 - [multiple](#multiple) 选择文件时是否支持多选，多选时无法限制可传文件个数（用户第一次选择文件时想选多少个是限制不了的），建议多选和限制可传文件个数功能二选一，不要同时开启，默认：`false` - [showImg](#showImg) 以缩略图方式展示已上传文件，如果有文件不是图片，则自动切换成列表展示，默认：`false` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 - 注意：远程上传时，值为上传成功后接口返回的文件 id，或 id 组成的数组；本地上传时，值为 file 对象，或 file 对象组成的数组；远程上传时有诸多限制，具体参考[uploadGroup](../uploadGroup/README.md)组件的 README.md 文档 #### date 日期选择器 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [defaultVal2](#defaultVal2) 默认值 2，为时间区间时，结束时间默认值 - [dateType](#dateType) 日期类型，可选值：`'date'、'daterange'、'datetime'、'datetimerange'、'year'、'month'` - [format](#formatB) 日期格式，不传时使用默认格式，常用值：`'YYYY'、'MM'、'YYYY-MM-DD'、'YYYY-MM-DD HH:mm:ss'`，具体参考 Moment.js 官网 - [dateOptions](#dateOptions) DatePicker 选择器额外配置，比如不可选日期与快捷选项 - [placeholder](#placeholder) 占位符，默认：`'请选择'` - [clearable](#clearable) 表单项是否可单独清空，为 true 且输入框有值时，光标移动到输入框尾部会有小叉，点击清空，默认：`true` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### time 时间选择器 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [defaultVal2](#defaultVal2) 默认值 2，为时间区间时，结束时间默认值 - [dateType](#dateType) 时间类型，可选值：`'time'、'timerange'` - [format](#formatC) 时间格式（控制返回值的格式和操作界面维度），不传时使用默认格式，常用值：`'HH:mm:ss'、'HH:mm'、'HH'` - [steps](#steps) timePicker 选择器下拉列表的时间间隔，数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时，分钟会显示：00、15、30、45。默认值：`[]` - [placeholder](#placeholder) 占位符，默认：`'请选择'` - [clearable](#clearable) 表单项是否可单独清空，为 true 且输入框有值时，光标移动到输入框尾部会有小叉，点击清空，默认：`true` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### monthRange 月份区间选择器 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值,开始时间默认值 - [defaultVal2](#defaultVal2) 默认值 2，结束时间默认值 - [format](#formatC) 时间格式（控制返回值的格式和操作界面维度），不传时使用默认格式，默认值：`'yyyy-MM'` - [dateOptions1](#dateOptions) 开始月份 DatePicker 选择器额外配置，比如不可选日期与快捷选项 - [dateOptions2](#dateOptions) 结束月份 DatePicker 选择器额外配置，比如不可选日期与快捷选项 - [placeholder](#placeholder) 占位符，默认：`'请选择日期'` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### editor 富文本编辑器 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [uploadImgMaxSize](#uploadImgMaxSize) 数字，限制上传图片大小，默认：102400(100k) - [uploadImgMaxLength](#uploadImgMaxLength) 数字，限制一次最多能传几张图片，默认：10 - [uploadImgShowBase64](#uploadImgShowBase64) 布尔对象，是否使用 base64 作为本地图片上传保存方式，默认：true - [uploadImgServe](#uploadImgServe) 对象，具体参考[editor](../editor/README.md)组件的 README.md 文档 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### editorPro 富文本编辑器 Pro - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [toolbarConfig](#toolbarConfig) 对象，工具栏配置，参考[wangEditor5 工具栏配置](https://www.wangeditor.com/v5/toolbar-config.html) - [editorConfig](#editorConfig) 对象，编辑器配置，参考[wangEditor5 编辑器配置](https://www.wangeditor.com/v5/editor-config.html) - [mode](#mode) 字符串，`'default'` 默认模式 - 集成了 wangEditor 所有功能；`'simple'` 简洁模式 - 仅有部分常见功能，但更加简洁易用，默认：`'simple'` - [height](#height) 正数/字符串，编辑区域高度，默认：`300` - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### inputMap 地图组件 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段，经度，必填，如：`lng` - [key2](#key2) 表单项收集的数据在提交时所在字段，纬度，必填，如：`lat` - [key3](#key2) 表单项收集的数据在提交时所在字段，地址名字，非必填，如：`name` - [defaultVal](#defaultVal) 默认值，经度 - [defaultVal2](#defaultVal2) 默认值 2，纬度 - [defaultVal3](#defaultVal2) 默认值 3，地址名字 - [showMap](#showMap) 显示地图，默认：`true` - [mapHeight](#mapHeight) 地图高度，默认：`'250px'` - [placeholder](#placeholder) 占位符，默认：`'搜索'` - [disabled](#disabled) 禁用该表单项，非响应式，可用 updateFormDataT 方法更改，默认：`false` - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [title](#title) 表单项的标题，位于表单项左上方 - [class](#class) 单个表单项的自定义样式类名 #### custom 自定义组件 - [label](#label) 标签 - [key](#key) 表单项收集的数据在提交时所在字段 - [defaultVal](#defaultVal) 默认值 - [slotName](#slotName) 插槽名字，自定义组件通过插槽接入表单 - [show](#show) 显示条件 - [showOr](#showOr) 显示条件间关系，设置 true 时为或运算，默认：`false` - [info](#info) 表单项的提示文字，位于表单项下面 - [class](#class) 单个表单项的自定义样式类名 - 注意：自定义组件限制非常少，理论上想放什么进来都行，需遵循几点，具名插槽模板放在 formR 组件标签内，将 valGroup（表单组件收集值的对象）传进模板，如： ``` <form-r> <template #myFormItem='{valGroup}'> <i-switch v-model='valGroup.myKey'/> </template> </form-r> 其中myFormItem为slotName的值，myKey为key的值 ``` - 注意：有时候自定义组件不靠 formR 组件收集值（仅展示或有独立的采集值的逻辑），则不需要设置 key，也不支持 defaultVal，如： ``` <formR> <template #myFormItem2> <Table :columns='columns' :data='data'/> </template> </formR> 其中myFormItem2为slotName的值，columns和data是使用formR组件的地方定义的table的数据 ```