FormItem

全新的 FormItem 组件,相比于 Element 的 FormItem,它支持的功能更多,同时它的定位是纯样式组件,不管理表单状态,所以也会更轻量,更方便定制

Markup Schema 案例

JSON Schema 案例

Template 案例

常用属性案例

无边框案例

设置去除组件边框

内嵌模式案例

设置表单组件为内嵌模式

反馈信息定制案例

可通过 feedbackIcon 传入指定反馈的按钮

尺寸控制案例

API

FormItem

属性名类型描述默认值
styleCSSProperties样式-
labelString | Vue Component标签-
labelStyleCSSProperties标签样式-
wrapperStyleCSSProperties组件容器样式-
classNamestring组件样式类名-
colonboolean冒号-
tooltipString | Vue Component问号提示-
tooltipLayout"icon" | "text"问提示布局"icon"
labelAlign"left" | "right"标签文本对齐方式"right"
labelWrapboolean标签换⾏,否则出现省略号,hover 有 tooltipfalse
labelWidthnumber标签固定宽度-
wrapperWidthnumber内容固定宽度-
labelColnumber标签⽹格所占列数,和内容列数加起来总和为 24-
wrapperColnumber内容⽹格所占列数,和标签列数加起来总和为 24-
wrapperAlign"left" | "right"内容文本对齐方式⻬"left"
wrapperWrapboolean内容换⾏,否则出现省略号,hover 有 tooltipfalse
fullnessboolean内容撑满false
addonBeforeString | Vue Component前缀内容-
addonAfterString | Vue Component后缀内容-
size"small" | "default" | "large"尺⼨-
extraReactNode扩展描述⽂案-
feedbackTextReactNode反馈⽂案-
feedbackLayout"loose" | "terse" | "popover" | "none"反馈布局-
feedbackStatus"error" | "warning" | "success" | "pending"反馈布局-
feedbackIconstring反馈图标-
requiredboolean星号提醒-
asteriskboolean星号提醒-
gridSpannumber⽹格布局占宽-

FormItem.BaseItem

纯样式组件,属性与 FormItem 一样,与 Formily Core 不做状态桥接,主要用于一些需要依赖 FormItem 的样式布局能力,但不希望接入 Field 状态的场景