经典表单

最基础的表单包括各种输入表单项#xff0c;比如input、select、radio、checkbox等。

在每一个form组件中#xff0…表单包含输入框单选框下拉选择多选框等用户输入的组件。

输入表单您可以收集、验证和提交数据。

经典表单

最基础的表单包括各种输入表单项比如input、select、radio、checkbox等。

templateel-form

//el-select/el-form-itemel-form-item

labelActivity

:span11el-date-pickerv-modelform.date1typedateplaceholderPick

datestylewidth:

classtext-gray-500-/span/el-colel-col

:span11el-time-pickerv-modelform.date2placeholderPick

timestylewidth:

100%//el-col/el-form-itemel-form-item

labelInstant

activities/el-checkboxel-checkbox

valuePromotion

activities/el-checkboxel-checkbox

valueOffline

activities/el-checkboxel-checkbox

valueSimple

exposure/el-checkbox/el-checkbox-group/el-form-itemel-form-item

valueSponsorSponsor/el-radioel-radio

valueVenueVenue/el-radio/el-radio-group/el-form-itemel-form-item

labelActivity

//el-form-itemel-form-itemel-button

typeprimary

clickonSubmitCreate/el-buttonel-buttonCancel/el-button/el-form-item/el-form

/templatescript

当一个表单中只有一个单行文本输出字段时浏览器应当将在此字段中按下Enter(回车键的行为视为提交表单的请求。

如果希望阻止这一默认行为可以在el-form标签上添加submit.prevent。

行内表单

当垂直方向空间受限且表单较简单时可以在一行内放置表单。

通过设置

inline

根据设计情况来选择最佳的标签对齐方式。

您可以分别设置el-form-item

label-position.

Form组件允许您验证用户的输入是否符合规范来帮助你找到和纠正错误。

Form

ref用来定义这个el-form表单:rules用来绑定所需要的规则具体可见js代码。

prop属性用于rules中对应数据规则的匹配注意prop中的值需要和v-model中的值对应例如prop”namev-model为ruleForm.name否则会出现输入值提示没有输入值的现象。

const

这个例子中展示了如何使用自定义规则来完成密码的二次验证。

本例还使用

status-icon

自定义校验规则同样需要写ref:rules绑定以及prop属性。

在js代码中rules里用了validator后面的参数为自定义校验的方法。

注意自定义的验证回调函数必须被调用即要写callback()。

const

returnruleFormRef.value.validateField(checkPass)}callback()}

const

除了一次通过表单组件上的所有验证规则外您也可以动态地通过验证规则或删除单个表单字段的规则。

domain来创建新的表单并为其添加验证规则跟之前的表单验证一样只不过这侧我们把

const

{dynamicValidateForm.domains.push({key:

Date.now(),value:

dynamicValidateForm.domains.indexOf(item)if

(index

{dynamicValidateForm.domains.splice(index,

1)}

的修饰符这是Vue自身提供的用于将绑定值转化为number类型的修饰符。

尺寸控制

内只有一个输入框或相关的控制部件如选择或复选框表单项的标签将自动附加在那个输入框上。

如果

el-form-item