Form Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
model | 表单数据对象 | object | — | — |
rules | 表单验证规则 | object | — | — |
inline | 行内表单模式(为true时,表单元素由纵向排列变为横向排列) | boolean | — | false |
label-width | 表单域标签的宽度,作为 Form 直接子元素的 form-item 会继承该值 (其实就是label标签的宽度) |
string | — | — |
size | 用于控制该表单内组件的尺寸 | string | medium / small / mini | — |
<el-form :model="ruleForm" :rules="rules" :inline="true" label-width="100px" size="mini" ref="ruleForm" >
<el-form-item label="名称" prop="product_name">
<el-input v-model="ruleForm.product_name" />
</el-form-item>
</el-form>
Element -----表单验证的功能 (ref、$refs)
关键词:rules 属性、ref、$refs
我们要对表单填的信息进行认证,Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则。
我们在 rules 这里写了对表单的验证规则,但是我们如何在 methods 里进行指定的表单进行认证,所以我们一开始就在 el-form 里写了 ref=”ruleForm”,我们在 methods 里就可以用
this.$refs.ruleForm.validate((valid) => {}
这样的方法对指定的表单根据你写的 rules 认证。
Form Methods
方法名 | 说明 | 参数 |
---|---|---|
validate | 对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promise | Function(callback: Function(boolean, object)) |
resetFields | 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果 | — |
Form-Item Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
prop | 表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的 | string | 传入 Form 组件的 model 中的字段 |
— |
label | 标签文本 | string | — | — |
required | 是否必填,如不设置,则会根据校验规则自动生成 | boolean | — | false |
label-width | 表单域标签的的宽度,例如 '50px' | string | — | — |
rules | 表单验证规则 | object | — | — |
size | 用于控制该表单域下组件的尺寸 | string | medium / small / mini |
嵌套在 el-form-item
中的 el-form-item
标签宽度默认为零,不会继承 el-form
的 label-width
。如果需要可以为其单独设置 label-width
属性。