Form-Form表单

一、典型表单 
在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，
包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker

model:表单数据对象，object格式

label-width  表单域标签文本的宽度，作为 Form 直接子元素的 form-item 会继承该值

嵌套在 el-form-item 中的 el-form-item 标签宽度默认为零，不会继承 el-form 的 label-width。如果需要可以为其单独设置 label-width 属性。

label-position：控制标签对齐方式，如果值为 left 或者 right 时，则需要设置 label-width，默认为right

label  标签文本

  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    取消
  

二、行内表单 

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
设置 inline 属性可以让表单域变为行内的表单域

  
    
      
    
    
      
        
        
      
    
    
      查询
    
  

三、表单验证

只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可

我们在 rules 这里写了对表单的验证规则，但是我们如何在 methods 里进行指定的表单进行认证，所以我们一开始就在 el-form 里写了 ref=”ruleForm”，我们在 methods 里就可以用

this.$refs['ruleForm'].validate((valid) => {}

  
    
  
  
    
      
      
    
  
  
    
      
        
      
    
    -
    
      
        
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    重置
  

https://github.com/yiminghe/async-validator 

rules中的type： 

四、自定义校验规则 

这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标。（出现对号或x）

  
    
  
  
    
  
  
    
  
  
    提交
    重置
  

五、单个的表单域上传递属性的验证规则&动态增减表单项 

除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则

  
    
  
  
    删除
  
  
    提交
    新增域名
    重置
  

六、数字类型验证 

数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。

  
    
  
  
    提交
    重置
  

七、 表单内组件尺寸控制
通过设置 Form 上的 size 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。
如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的size属性，直接为这个表单项或表单组件设置自己的size即可。

  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
      
      
      
    
  
  
    
      
      
    
  
  
    立即创建
    取消
  

Form Attributes

参数	说明	类型	可选值	默认值
model	表单数据对象	object	—	—
rules	表单验证规则	object	—	—
inline	行内表单模式（为true时，表单元素由纵向排列变为横向排列）	boolean	—	false
label-position	表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width	string	right/left/top	right
label-width	表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 (其实就是label标签的宽度)	string	—	—
status-icon	是否在输入框中显示校验结果反馈图标	boolean	—	false
size	用于控制该表单内组件的尺寸	string	medium / small / mini	—
disabled	是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效	boolean	—	false

 

Form Methods

方法名	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	—

Form-Item Attributes

参数	说明	类型	可选值	默认值
prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	string	传入 Form 组件的 model 中的字段	—
label	标签文本	string	—	—
label-width	表单域标签的的宽度，例如 '50px'	string	—	—
required	是否必填，如不设置，则会根据校验规则自动生成	boolean	—	false
rules	表单验证规则	object	—	—
size	用于控制该表单域下组件的尺寸	string	medium / small / mini