CommonField 通用表单域组件

组件的目的是用标准格式的数据来生成表单域,最终来实现更高阶的表单组件。

组件支持所有实现了v-model/value+input的组件,所以可以用于生成自定义表单域。对于引用类型的value值(例如Array, Object),组件会进行深拷贝传入表单域组件,故使用组件时请严格遵循单向数据流方式修改数据。

基础用法

组件对ElRadioGroup, ElCheckboxGroup组件内的子组件的参数进行了修正,使其valuelabel的表现与Select一致。

绑定值转Number类型

通过设置field.isNumber为true可以修改绑定值为数字,表现类似于.number修饰符,对于无法转换的内容会返回原内容。

使用组件或渲染函数来渲染数据项组件内容

示例用组件渲染了Options组件插槽内容,用渲染函数自定义了Radio组件插槽内容。

ps: codepen可能不支持这部分的代码。

自定义表单域组件数据项组件内容内容

示例用组件渲染了Options组件插槽内容,用渲染函数自定义了Radio组件插槽内容。

ps: codepen可能不支持这部分的代码。

使用表单域组件具名插槽

示例使用渲染函数生成了Input组件的append插槽内容,用组件传入了Select组件的empty插槽内容。

提示

传递了data参数的表单域组件会使用默认插槽渲染子组件列表。你仍可以通过slots传入默认作用域插槽,但会有两部分内容。

调用表单域组件示例上的方法

Attributes

参数类型说明可选值默认值
modelValue/v-modelany绑定值----
componentstring | Component表单域组件对象,或者字符串名称(需提前注册)。----
propsobject() => object表单域组件绑定props参数对象,或者返回参数对象的函数。--
eventsobject表单域组件绑定事件对象。和合并覆盖通过模版写法传入组件的事件对象。----
dataobject[]表单域组件子组件数据列表。适用于Select等组件。----
└ valuestring | number子组件绑定数据。CheckboxGroup , RadioGroup组件中的子组件会修正label为value值。----
└ labelstring | number子组件展示文字。CheckboxGroup , RadioGroup组件中的子组件会用来填充到插槽中。----
└ ......其余属性会作为props绑定到子组件上----
isNumberboolean是否将绑定值转换为数字(如果可以)----
initValueany组件绑定值初始值----
needTrimboolean是否需要去掉字符串类型的绑定值前后的空格,仅在离开焦点时过滤,以保留字符串中间的空格。----
childComponentstring | Component表单域组件子组件,用于生成data数据列表。
如果component使用了(ElCheckboxGroup/ElRadioGroup), 此参数可以缺省。
----
dataItemRenaderComponent | () => VNode表单域组件子组件默认插槽内容,可以使用组件或VNode渲染函数。----
slotsobject表单域组件的插槽配置对象。对象key为插槽名称,值为配置对象,例如{ header: Slot }----

Methods

方法名说明参数
callFieldMethod调用原表单域实例上的方法,可传递参数(fnName:String, ...args[])
Last Updated:
Contributors: wxhccche, wxhccc