iview 组件的用法
iview 组件的用法form表单的使用- 这里的ref是用来获取这个form表单的- :model=" " 这里面的值是一个对象- :rules=" " 这里面是写验证内容可以参考iview官网[form](http://v1.iviewui.com/components/form)- label 这里是用来写标题的- prop这个应该要跟你formValidate中的属性一致(也就是你v-mo
·
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();
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)