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 属性。