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
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| value/v-model | any | 绑定值 | -- | -- |
| field | object | 表单域配置对象。具体字段见field | -- | -- |
| lib-prefix | string | ui库组件前缀,例如'element-ui'前缀为'El'. 使用字符串生成带子组件的表单域组件时会用到。 | -- | 'El' |
field
注意
配置参数是field对象的键名, 不能使用短横线写法.
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| component | string(ComponentName) /Component | 表单域组件对象,或者字符串名称(需提前注册)。 | -- | -- |
| props | object/function | 表单域组件绑定props参数对象,或者返回参数对象的函数。 | -- | -- |
| events | object | 表单域组件绑定事件对象。和合并覆盖通过模版写法传入组件的事件对象。 | -- | -- |
| data | object[] | 表单域组件子组件数据列表。适用于Select等组件。 | -- | -- |
| └ value | string / number | 子组件绑定数据。CheckboxGroup,RadioGroup组件中的子组件会修正label为value值。 | -- | -- |
| └ label | string / number | 子组件展示文字。CheckboxGroup,RadioGroup组件中的子组件会用来填充到插槽中。 | -- | -- |
| └ ... | ... | 其余属性会作为props绑定到子组件上 | -- | -- |
| isNumber | boolean | 是否将绑定值转换为数字(如果可以) | -- | -- |
| initValue | any | 组件绑定值初始值 | -- | -- |
| forbidValueFixed | boolean | 是否禁用对(ElCheckboxGroup/ElRadioGroup)子组件的value修正。 | -- | -- |
| childComponent | string(ComponentName) /Component | 表单域组件子组件,用于生成data数据列表。如果 component使用了(ElCheckboxGroup/ElRadioGroup), 此参数可以缺省。 | -- | -- |
| dataItemContent | Component /() => VNode | 表单域组件子组件默认插槽内容,可以使用组件或VNode渲染函数。 | -- | -- |
| slots | object | 表单域组件的具名插槽配置对象。对象key为插槽名称,值为配置对象,例如{ header: {...} }。如果直接写配置对象会当作默认插处理。插槽配置对象说明见slot | -- | -- |
| scopedSlots | object | 表单域组件的作用域域插槽配置对象。对象key为插槽名称,值为返回VNode的函数,具体见vue-jsx | -- | -- |
slot object
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| component | Component /(h, vdo, slotName) => VNode | 插槽内容,可以使用组件或VNode渲染函数。函数会传入h($createElement别名),Vue Data Object,插槽名称。组件则会绑定VDO对象。 | -- | -- |
| props | object | 插槽组件绑定props参数对象,会合并到VDO对象中。 | -- | -- |
| events | object | 插槽组件绑定事件对象。会合并到VDO对象中。 | -- | -- |
Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| callFieldMethod | 调用原表单域实例上的方法,可传递参数 | (fnName:String, ...args[]) |