antd?vue?v-decorator的取值与赋值问题怎么解决
今天主机评测网小编给大家分享一下antdvuev-decorator的取值与赋值问题怎么解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
antd vue v-decorator的取值与赋值
v-decorator 是 Ant Design 的控件验证属性。
经过 getFieldDecorator 或 v-decorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管
这会导致以下结果：
你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。
你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
你不应该用 v-model，可以使用 this.form.setFieldsValue 来动态改变表单值。
定义form：
<template><divclass="main"><a-formid="formLogin"class="user-layout-login"ref="formLogin":form="form"@submit="handleSubmit"><a-form-item><a-inputsize="large"type="text"placeholder="账户:"v-decorator="['username',{initialValue:'',rules:[{required:true,message:'请输入帐户名或邮箱地址'},{validator:handleUsernameOrEmail}],validateTrigger:'change'}]"><a-iconslot="prefix"type="user":/></a-input></a-form-item></a-form></div></template><script>...exportdefault{...data(){return{...form:this.$form.createForm(this),}},created(){},...}</script>v-decorator 取值：
this.form.validateFields((err,values)=>{//这里做逻辑处理console.log(values)//{username:''}})v-decorator 赋值：
this.form.setFieldsValue({username:'设置值'})清空表单数据：
this.form.resetFields
ant design vue之v-decorator问题
1.在template中直接使用
required: true 设置必填, trigger: 'blur' 设置失去焦点触发校验
<a-inputv-decorator="['name',{rules:[{required:true,message:'请输入账号!'}],trigger:'blur'}]"/>2.在script中设置校验规则
template 部分
<a-inputv-decorator="['password',validatorRules.password]"/>
script 部分
data(){return{form:this.$form.createForm(this),validatorRules:{password:{//name与v-decorator中属性对应initialValue:123456,//初始值rules:[{required:true,message:'请输入密码!'},//此处开启校验必填{min:5,message:'长度不少于5个字符'},//长度校验{validator:this.validatePassword},//校验规则函数，],trigger:'blur'//触发方式},},}},methods:{validatePassword(rule,value,callback){}}3. 完整代码
<template><divclass="login"><a-form:form="form":label-col="{span:5}":wrapper-col="{span:12}"@submit="handleSubmit"><a-form-itemlabel="name"><!--直接写检验规则--><a-inputv-decorator="['name',{rules:[{required:true,message:'请输入账号!'}],trigger:'blur'}]"/></a-form-item><a-form-itemlabel="password"><!--在script里面定义更复杂的检验规则,--><a-inputv-decorator="['password',validatorRules.password]"/></a-form-item><a-form-item:wrapper-col="{span:12,offset:5}"><a-buttontype="primary"html-type="submit">Login</a-button></a-form-item></a-form></div></template><script>exportdefault{name:'login',data(){return{form:this.$form.createForm(this),validatorRules:{password:{//name与v-decorator中属性对应initialValue:123456,//初始值rules:[{required:true,message:'请输入密码!'},//此处开启校验必填{min:5,message:'长度不少于5个字符'},//长度校验{validator:this.validatePassword},//校验规则函数，],trigger:'blur'//触发方式},},}},created(){//this.$nextTick(()=>{//this.form.setFieldsValue({name:'yyy',password:123});//})},mounted(){this.form.setFieldsValue({name:'yyy',password:123});},methods:{handleSubmit(e){e.preventDefault();this.form.validateFields((err,values)=>{if(!err){console.log('Receivedvaluesofform:',values);}});},validatePassword(rule,value,callback){}}}</script>注意：
确保使用 this.form.setFieldsValue({name:'yyy',password: 123}) 设置值
或者 this.form.validateFields((err, values) => { }); 获取值
之前
已经 this.$form.createForm(this)
如果在钩子函数里面使用 setFieldsValue 报类似错误
warning.js?d96e:34 Warning: You cannot set a form field before rendering a field associated with the value. You can use `getFieldDecorator(id, options)` instead `v-decorator="[id, options]"` to register it before render.
可以这样试下
this.$nextTick(()=>{this.form.setFieldsValue({name:'yyy',password:123});})以上就是“antdvuev-decorator的取值与赋值问题怎么解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注主机评测网行业资讯频道。
下一篇：idea?intellij怎么快速修复if语句缺少大括号问题