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-modelany绑定值,如果fields是数组时,绑定值需要是一个对象。----
propsobject/function根层FormItem组件绑定props参数对象,或者返回参数对象的函数。----
namestring根层FormItem组件绑定name参数。仅需当前层级prop字符串。----
prevNames(string/number)[]当前组件绑定name参数的前置部分,数组格式。会拼接上name后生成完整name属性传递给根层FormItem----
textboolean /
string /
Function(prop, value)
表单域内是否显示文本,或者设置显示的文本内容。----
fieldobject表单域组件配置对象,传递给CommonField组件的field字段,具体见CommonField#field----
childrenobject []子表单项数组,field字段互斥,优先级高于field。用于在表单域区域生成子表单项。----
└ prop同上作用同上一级prop。子表单项无需设置prev-prop字段,会使用上一级的自动拼接。----
└ props同上作用同上一级props----
└ text同上作用同上一级text----
└ field同上作用同上一级field。有扩展字段----
└└ colPropsobject默认情况下子表单项会平分24栅格。可以通过此字段自定义每项所占栅格数。----
slotsobject插槽配置对象,具体结构见----
onRestoredFunction(data)如果搜索表单使用了记忆功能,则在恢复数据时通知监听了的组件----

Methods

组件代理了根层级的FormItem组件上的方法, 具体见FormItem文档。

Last Updated:
Contributors: wxhccche, wxhccc