本篇内容介绍了“Vue fORM表单如何回现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! form 表
本篇内容介绍了“Vue fORM表单如何回现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
form 表单如何回现
在 Ant Design Of Vue (ant-design-vue) 中,回现不再是使用 v-model ,会提示你直接使用 v-decorator
<a-upload
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"
>
<img width="100" height="100" v-if="formData.imageUrl" :src="formData.imageUrl" alt="avatar" />
<div v-else>
<div class="ant-upload-text">
上传
</div>
</div>
</a-upload>
回显的话,直接使用 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表单如何回现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!
--结束END--
本文标题: Vue form表单如何回现
本文链接: https://www.lsjlt.com/news/92010.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0