FormItem 表单项

组织标题、表单控件和字段校验提示，通常放在 Form 表单 内。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 在 fui-form 内配置与 model 对应的字段 -->
<fui-form-item label="姓名" prop="name" asterisk>
  <!-- 姓名输入 -->
  <fui-input v-model="formData.name" />
</fui-form-item>

属性

属性	类型	说明	官网默认值
padding	Array	内边距	['30rpx', '32rpx']
marginTop	Number / String	上外边距，单位 rpx	0
marginBottom	Number / String	下外边距，单位 rpx	0
label	String	标题文字	-
labelSize	Number / String	标题字号，0 使用全局值	0
labelColor	String	标题颜色，未设置时使用表单配置	-
labelWidth	Number / String	标题宽度，0 使用全局值	0
labelRight	Number / String	标题与内容间距，0 使用全局值	0
labelAlign	String	标题对齐：left、right	left
labelWeight	Number / String	标题字重，0 使用全局值	0
asterisk	Boolean	是否显示必填星号	false
asteriskColor	String	星号颜色，未设置时使用表单配置	-
asteriskPosition	String	星号位置：left、right	left
background	String	背景色	#fff
highlight	Boolean	是否显示点击反馈	false
arrow	Boolean	是否显示箭头	false
arrowColor	String	箭头颜色	#B2B2B2
bottomBorder	Boolean	是否显示底边线	true
borderColor	String	底边线颜色	#EEEEEE
left	Number / String	边线左偏移，单位 rpx	32
right	Number / String	边线右偏移，单位 rpx	0
radius	String	圆角	0rpx
param	Number / String	点击事件携带的参数	0
prop	String	校验时对应 model 的字段名	-
errorPosition	Number / String	错误定位：1 absolute、2 relative	1
errorAlign	String	错误对齐：left、center、right	center
rules	Object	当前字段校验规则	{}

事件

事件	说明	回调参数
click	点击表单项	{ param }

实例提供 setRules(rules)、setRulesMerge(rules)、validator(value) 和 clearValidate()。部分平台对嵌套函数传值有限制，可使用设置规则的方法。

插槽

插槽	说明
default	表单项内的控件内容
right	右侧自定义内容
vertical	纵向布局的自定义内容