Vue form表单如何回现

本篇内容介绍了"Vue form表单如何回现"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

form 表单如何回现

在 Ant Design Of Vue (ant-design-vue) 中，回现不再是使用 v-model ，会提示你直接使用 v-decorator

v-decorator="[

'logo',

{rules: [{ required: true, message: '请上传店铺图片' }], validateTrigger: ['change','blur']}

]"

name="logo"

accept=".png,.jpg,.jpeg,.svg"

method="post"

list-type="picture-card"

class="avatar-uploader"

:show-upload-list="false"

:action="$upload_url"

:headers="headers"

:data="requestData"

@change="handleChange"

>

回显的话，直接使用 this.form.setFieldsValue

this.form.setFieldsValue({"username":['username_ddddd'],"nickname":['nickname_ddddd']}); //设置值

this.form.setFieldsValue({"username": 'username_ddddd', "nickname": 'nickname_ddddd'}); //设置值

this.form.getFieldsValue();// 获取所有值

this.form.getFieldsValue(['username','nickname']); // 获取某一个值

this.form.resetFields(); // 重置表单值

this.form.validateFields((err,fieldsValue) => { // 校验所有的值

if (!err) {

console.log(fieldsValue); //获取数据 {nickname: "实际值", username: "实际值"}

}else {

console.log(err);

}

});

this.form.validateFields(['nickname'],(err,fieldsValue)=>{ // 校验某个值

if (!err) {

console.log(fieldsValue); //获取数据 {nickname: "实际值"}

}else {

console.log(err);

}

});

这里需要注意的是，有时候会控制台发生一个警告，就是说，你在组件渲染的时候，给我这个表单设置值，关于You cannot set a form field before rendering a field associated with the value

formData: {

handler: function (val) {

const { name, note } = val

this.$nextTick(() => {

if (this.type === 'edit') {

this.form.setFieldsValue({

name,

note

})

}

})

},

deep: true

}

2. upload 组件在上传的时候，会产生 x-request-with 请求头发生跨域的问题，

需要给组件的 headers 设置 x-request-with 为 null

headers: {

'X-Requested-With': null

},

"Vue form表单如何回现"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！