FormFieldItem 表单项
基于FormItem组件和CommonField组件封装的表单项组件。用于通过数据生成带验证功能的表单项。
提醒
因为使用了FormItem组件,所以组件必须放置于Form组件内部。
基础用法
纯文本展示
通过设置text参数为boolean,function,(string/number)类型可以让表单域展示/隐藏,显示函数返回内容,显示给定内容。
多表单域组件
设置children参数为包含多个子表单项对象的数组时,可以构建出适用于特定场景的表单项。
注意!
此结构仅允许一层。设置子表单项对象的children无效。此类场景建议自定义表单域组件然后传入本组件。
使用FormItem组件插槽
组件支持设置FormItem组件的具名插槽和作用域插槽。具名插槽中的default不会覆盖表单域内容,而是作为额外内容放置于表单域区域。
调用FormItem组件上的方法
组件代理了根层级的FormItem组件上的方法,对于子层级的FormItem组件,请使用$refs获取后调用
提示
FormItem组件文档参照 FormItem(Element)
Attributes
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| value/v-model | any | 绑定值,如果fields是数组时,绑定值需要是一个对象。 | -- | -- |
| props | object/function | 根层FormItem组件绑定props参数对象,或者返回参数对象的函数。 | -- | -- |
| prop | string | 根层FormItem组件绑定prop参数。仅需当前层级prop字符串。 | -- | -- |
| prev-prop | (string/number)[] | 当前组件绑定prop参数的前置部分,数组格式。会拼接上prop后生成完整prop属性传递给根层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 | 具名插槽配置对象,具体结构见 | -- | -- |
| scopedSlots | object | 作用域插槽配置对象,具体结构见 | -- | -- |
Methods
组件代理了根层级的FormItem组件上的方法, 具体见FormItem文档。