CommonField 通用表单域组件
组件的目的是用标准格式的数据来生成表单域,最终来实现更高阶的表单组件。
组件支持所有实现了v-model/value+input的组件,所以可以用于生成自定义表单域。对于引用类型的value值(例如Array, Object),组件会进行深拷贝传入表单域组件,故使用组件时请严格遵循单向数据流方式修改数据。
基础用法
组件对ElRadioGroup
, ElCheckboxGroup
组件内的子组件的参数进行了修正,使其value,label的表现与Select
一致。
绑定值转Number类型
通过设置field.isNumber
为true可以修改绑定值为数字,表现类似于.number
修饰符,对于无法转换的内容会返回原内容。
使用组件或渲染函数来渲染数据项组件内容
示例用组件渲染了Options
组件插槽内容,用渲染函数自定义了Radio
组件插槽内容。
ps: codepen可能不支持这部分的代码。
自定义表单域组件数据项组件内容内容
示例用组件渲染了Options
组件插槽内容,用渲染函数自定义了Radio
组件插槽内容。
ps: codepen可能不支持这部分的代码。
使用表单域组件具名插槽
示例使用渲染函数生成了Input
组件的append插槽内容,用组件传入了Select
组件的empty插槽内容。
提示
传递了data
参数的表单域组件会使用默认插槽渲染子组件列表。你仍可以通过slots
传入默认作用域插槽,但会有两部分内容。
调用表单域组件示例上的方法
Attributes
参数 | 类型 | 说明 | 可选值 | 默认值 |
---|---|---|---|---|
modelValue/v-model | any | 绑定值 | -- | -- |
component | string | Component | 表单域组件对象,或者字符串名称(需提前注册)。 | -- | -- |
props | object | () => object | 表单域组件绑定props参数对象,或者返回参数对象的函数。 | -- |
events | object | 表单域组件绑定事件对象。和合并覆盖通过模版写法传入组件的事件对象。 | -- | -- |
data | object[] | 表单域组件子组件数据列表。适用于Select 等组件。 | -- | -- |
└ value | string | number | 子组件绑定数据。CheckboxGroup , RadioGroup 组件中的子组件会修正label为value值。 | -- | -- |
└ label | string | number | 子组件展示文字。CheckboxGroup , RadioGroup 组件中的子组件会用来填充到插槽中。 | -- | -- |
└ ... | ... | 其余属性会作为props绑定到子组件上 | -- | -- |
isNumber | boolean | 是否将绑定值转换为数字(如果可以) | -- | -- |
initValue | any | 组件绑定值初始值 | -- | -- |
needTrim | boolean | 是否需要去掉字符串类型的绑定值前后的空格,仅在离开焦点时过滤,以保留字符串中间的空格。 | -- | -- |
childComponent | string | Component | 表单域组件子组件,用于生成data 数据列表。如果 component 使用了(ElCheckboxGroup /ElRadioGroup ), 此参数可以缺省。 | -- | -- |
dataItemRenader | Component | () => VNode | 表单域组件子组件默认插槽内容,可以使用组件或VNode渲染函数。 | -- | -- |
slots | object | 表单域组件的插槽配置对象。对象key为插槽名称,值为配置对象,例如{ header: Slot } | -- | -- |
Methods
方法名 | 说明 | 参数 |
---|---|---|
callFieldMethod | 调用原表单域实例上的方法,可传递参数 | (fnName:String, ...args[]) |