FormFieldItem 表单项
基于FormItem
组件和CommonField
组件封装的表单项组件。用于通过数据生成带验证功能的表单项。
提醒
因为使用了FormItem
组件,所以组件必须放置于Form
组件内部。
基础用法
纯文本展示
通过设置text
参数为boolean,function,(string/number)类型可以让表单域展示/隐藏,显示函数返回内容,显示给定内容。
多表单域组件
设置children
参数为包含多个子表单项对象的数组时,可以构建出适用于特定场景的表单项。
注意!
此结构仅允许一层。设置子表单项对象的children
无效。此类场景建议自定义表单域组件然后传入本组件。
使用FormItem组件插槽
组件支持设置FormItem
组件的具名插槽和作用域插槽。具名插槽中的default
不会覆盖表单域内容,而是作为额外内容放置于表单域区域。
Label说明
通过labelTip属性可以给label文字添加额外的说明功能
调用FormItem组件上的方法
组件代理了根层级的FormItem
组件上的方法,对于子层级的FormItem
组件,请使用$refs
获取后调用
提示
FormItem组件文档参照
Attributes
参数 | 类型 | 说明 | 可选值 | 默认值 |
---|---|---|---|---|
value/v-model | any | 绑定值,如果fields是数组时,绑定值需要是一个对象。 | -- | -- |
props | object/function | 根层FormItem 组件绑定props参数对象,或者返回参数对象的函数。 | -- | -- |
name | string | 根层FormItem 组件绑定name 参数。仅需当前层级prop字符串。 | -- | -- |
prevNames | (string/number)[] | 当前组件绑定name 参数的前置部分,数组格式。会拼接上name 后生成完整name属性传递给根层FormItem 。 | -- | -- |
text | boolean / string / Function(prop, value) | 表单域内是否显示文本,或者设置显示的文本内容。 | -- | -- |
field | object | 表单域组件配置对象,传递给CommonField 组件的field 字段,具体见CommonField#field | -- | -- |
children | object [] | 子表单项数组,和field 字段互斥,优先级高于field 。用于在表单域区域生成子表单项。 | -- | -- |
└ prop | 同上 | 作用同上一级prop。子表单项无需设置prev-prop 字段,会使用上一级的自动拼接。 | -- | -- |
└ props | 同上 | 作用同上一级props | -- | -- |
└ text | 同上 | 作用同上一级text | -- | -- |
└ field | 同上 | 作用同上一级field 。有扩展字段 | -- | -- |
└└ colProps | object | 默认情况下子表单项会平分24栅格。可以通过此字段自定义每项所占栅格数。 | -- | -- |
slots | object | 插槽配置对象,具体结构见 | -- | -- |
onRestored | Function(data) | 如果搜索表单使用了记忆功能,则在恢复数据时通知监听了的组件 | -- | -- |
Methods
组件代理了根层级的FormItem
组件上的方法, 具体见FormItem文档。