zui

Appearance

Form 组件 ​

表单组件

基础用法 ​

设置

基础布局

Name
Email
Age
Gender
Hobbies
Country
Select country
Bio

Top-left 布局

Name
Email
Age
Gender
Hobbies
Country
Select country
Bio

高级验证 ​

表单组件支持多种验证规则类型，包括必填验证、长度验证、数值范围验证、正则表达式验证和自定义验证函数。

Username
Password
Confirm Password
Age
Phone
Website

动态表单 ​

表单组件支持动态添加和移除表单项，适用于需要动态收集数据的场景，如技能列表、工作经历等。

动态表单示例

Name
Contact
Email
Address
Skills
Experience

Experience 1

Company
Position
Start Date
End Date
I currently work here

表单布局切换 ​

表单组件支持多种布局方式和尺寸设置，可以根据不同的场景需求进行灵活配置。

表单布局切换

Layout:
Size:
Username
Password
Email
Phone
Country
Select country
Language
Select language

表单联动 ​

表单组件支持灵活的联动功能，可以根据用户的选择动态显示或隐藏表单项，或者根据前面的输入动态改变后面的选项。

表单联动示例

Country
Select a country
User Type
Full Name
Gender
Date of Birth
Subscription

API ​

Form Props ​

参数名类型默认值说明
modelValueObject{}表单数据对象，支持 v-model 双向绑定
rulesObject{}表单验证规则，键为字段名，值为验证规则
disabledBooleanfalse是否禁用整个表单
labelWidthString'100px'标签宽度，支持 px、%等单位
labelPositionString'left'标签位置，可选值：left/right/top/left-top/right-top
labelAlignString'right'标签文本对齐方式，可选值：left/center/right

FormItem Props ​

参数名类型默认值说明
labelString''标签文本
propString-表单字段名，对应 modelValue 中的属性
requiredBooleanfalse是否显示必填星号
labelPositionStringundefined覆盖 Form 组件的 labelPosition 设置
labelAlignStringundefined覆盖 Form 组件的 labelAlign 设置