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文档。