FormFields 表单项组

使用FormFieldItem组件或者自定义组件来生成一组表单项,(多个)表单项组可以放置于Form组件中来渲染出完整表单。此外带data数据的表单项组件之间还可以设置联动。

提醒

因为使用了FormItem组件,所以组件必须放置于Form组件内部。

基础用法

本例表单项组包含常见表单域,比如输入框,选择器,开关,单选,多选,时间选择器。

表单项之间级联

级联适用于能使用data生成子选项的表单项,例如Select,CheckboxGroup,RadioGroup组件或其他自定义组件。 级联可以一对一,也可以多对一。

使用自定义组件作为表单项

自定义组件可以和使用FormFieldItem组件的表单项混用。自定义组件需要实现v-model/value+input数据绑定模式,传入值为数据项的props对应的值。

调用表单项组件上的方法

自定义组件表单项使用级联逻辑 高阶

自定义组件作为表单项时,只要实现了change事件即可作为级联触发源。但如果需要作为被触发项,则需要通过设置cascadeHandler来处理。

下面例子演示了自定义表单项如何即作为触发项,同时也作为被触发项。

级联工作原理说明

组件支持对使用data数据生成子组件的表单项通过设置关联属性和级联数据来实现级联逻辑。

组件项可以分为监听项和被监听(触发源)项,同一个组件既可以是监听项又是被监听项。

被监听项值发生改变时会触发change事件,从而调用监听项绑定的事件。

对于使用field字段来生成表单域的表单项,组件默认的处理逻辑是被监听表单项发生改变时,所有监听项会根据绑定值获取到对于级联数组,并替换到field.data数组中。默认从0索引开始替换。对于需要保留项的,可以设置spliceStart来从其他索引值开始替换。

此外被监听表单项发生改变时,所有监听项还会重置绑定值,默认会设置为undefined,如果需要可以通过clearValue设置成其他值。

自定义组件可以通过设置cascadeHandler参数作为监听项,但如果需要作为被监听项,则自定义组件内部需要在绑定值发生改变时触发change事件。

Attributes

参数类型说明可选值默认值
value/v-modelobject表单项组绑定值,绑定值必须是一个对象。----
itemsobject[]表单项配置数据对象数组,具体结构见item----
delay-updateboolean是否在数据更新时使用延迟赋值。用于处理瞬时多字段赋值的特殊情况,例如浏览器自动填充账号密码。----

item

提示

item对象可以默认使用FormFieldItem组件渲染。对象内FormFieldItem组件支持的props属性会自动绑定到组件上。 也可以通过component字段使用自定义表单项组件,使用自定义表单项组件时,只有部分字段会被传递给组件。

参数类型说明可选值默认值
----以下为公共参数。----
hideboolean/function表单项是否隐藏(不渲染)。----
propsobject/function表单项组绑定参数对象或返回对象的函数。会自己绑定到组件上。----
propstring/number表单项绑定值在value中对应的键名。使用children字段时可缺省,children数组对象中的prop属性会作为键名,具体见FormFieldItem组件。----
keystring/number表单项组件的key,缺省时使用prop属性。如果prop缺省时会使用数组索引,为了性能prop缺省时请设置key----
dependenciesstring/number当前表单项需要监听的表单项的prop属性。----
cascadeDataobject指定结构的级联数据。具体结构说明见级联数据结构open in new window----
cascadeHandlerFunction(changeValue, prop, modelData, item)自定义级联处理逻辑。参数分别为被监听项改变后的值,当前表单项的prop,匹配到的级联数据数组,当前表单项原始数据对象。函数会绑定组件上下文允许----
spliceStartnumberfield.data字段在更新时,开始替换的索引值--0
clearValueobject被监听项发生变化时,监听项绑定值会被重置的值。--undefined
----使用FormFieldItem组件渲染支持组件所有props参数,具体见文档。----
----使用自定义组件时支持的参数。----
componentstring(ComponentName)
/Component
自定义组件对象或组件名字符串。----
slotNamestring自定义插槽名称串。----

Methods

方法名说明参数
callItemMethod调用表单项实例上的方法,可传递参数(prop:String,fnName:String, ...args[])

提示

可以通过组件的实例上的$refs获取到各表单项的实例。注意获取到的是数组(因为循环的原因)。可以使用实例调用组件上的方法。

Slots

name说明作用域数据
--放置于表单项组后面的内容--
Last Updated:
Contributors: wxhccc, wxhccche