iview 组件的用法

iview 组件的用法

form表单的使用

 - 这里的ref是用来获取这个form表单的
 - :model=" " 这里面的值是一个对象  
 - :rules=" " 这里面是写验证内容可以参考iview官网[form](http://v1.iviewui.com/components/form)
 - label 这里是用来写标题的
 - prop这个应该要跟你formValidate中的属性一致（也就是你v-model中的值）

 <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="Name" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
        </FormItem>
</Form>       
   export default {
        data () {
            return {
					 formValidate: {
					                    name: '', 
					                    }，

 - 这里的ruleValidate一定要跟上面的rules中的变量一致
 - 
					 ruleValidate: {
					 
 - 这个name一定要和prop中的变量一致
 - type:这个值可以不写，他的值就是你上面prop那行填入的数据类型。如果你上面填了但是还是报错那你就给他加一个type类型，一定要符合你上面prop下的数据类型
				                    	name: [
				                       				 { required: true, message: 'The name cannot be empty', trigger: 'blur',type:}
				                              ]
               					   }
               }
         }


 methods: {
            handleSubmit (name) {

 - 这行` 固定写法 ： this.$refs[name].validate((valid)`代码非常重要，比如你点击按钮的是时候，若给他设置了prop，你却没有填入值。那么你是不会往下执行的。
 - 
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }，

 - 这行`固定写法：this.$refs[name].resetFields();`是重置你上面prop下面的值，执行这个函数会清空prop下面的值

        handleReset (name) {
                this.$refs[name].resetFields();
            }

    }