表单 v-decorator 相关用法

已于 2022-11-30 18:06:14 修改
阅读量481 收藏
点赞数
分类专栏： 表单 文章标签： javascript html 前端
于 2022-11-24 17:47:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45530512/article/details/128023252
版权
本文介绍了在使用Vue和Ant Design时遇到的表单setFieldsValue报错问题，即在渲染字段之前无法设置表单字段。解决方法包括使用`this.$nextTick`或`setTimeout`来确保在正确的时间更新表单状态。同时，文章还涵盖了表单数据回写、验证、单独设置值以及数据收集等前端开发中常见的表单操作。
摘要由CSDN通过智能技术生成

1、 表单数据回写

import pick from 'lodash.pick'//要引用这个必然会报pick错	

this.form.resetFields();
				this.model = Object.assign({}, record)
				this.$nextTick(() => {
					this.form.setFieldsValue(pick(this.model, 'tenantId', 'devUsername', 'locationId', 'devPwd',
						'locationType', 'cloudAddress', 'devId', 'cloudPort', 'devName', 'productKey',
						'devIp',
						'productName'))
				})


2、表单setFieldsValue报错You cannot set a form field before rendering a field associated with the value

解决：使用this.$nextTick或者setTimeout

可参考文章：(4条消息) 表单setFieldsValue报错You canno

最低0.47元/天 解锁文章
几个高兴
关注
专栏目录
antdv vue。表单 自定义组件使用 v-decorator
qq_26093077的博客
08-05 1703
antd vue 中，在 form 表单中的自定义组件使用 v-decorator 问题描述 项目需要，在表单中上传图片，所以要自己定以一个上传图片的组件，直接在 form 中使用，但是普通的自定义组件无法使用表单的 v-decorator。 分析 this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]" 经过 getFieldDecorator 或 v-decorator 包装的控件，表单控件会自动添加 value（或
VUE框架 ant-desigin-vue之v-decorator组件使用与校验
我笔记
09-01 1万+
1.首先v-decorator虽然以V开头但是他并不是vue自定义的组件，他是通过ant-design-vue(蚂蚁金服UI组件库)去获取表单数据时使用v-decorator方式去给每个项注册，这样不仅可以通过组件去拉取表单数据，同时对必填项做**校验 **。 2.使用时要仔细阅读组件库手册，以确保不会出现因为没有注册组件等等基础问题。 附组件库当前form表单链接地址：添加链接描述 3.具体使用 data（）： 创建表单 通过ant-design-.
详解vue-property-decorator使用手册
01-19
一，安装 npm i -s vue-property-decorator 二，用法 1，@Component(options:ComponentOptions = {}) @Component 装饰器可以接收一个对象作为参数，可以在对象中声明 components ，filters，directives 等未提供装饰器的选项 虽然也可以在 @Component 装饰器中声明 computed，watch 等，但并不推荐这么做，因为在访问 this 时，编译器会给出错误提示 import { Vue, Component } from 'vue-property-decorator' @Co
ant-desigin-vue中form表单的使用
热门推荐
weixin_44051815的博客
03-07 4万+
form表单的使用 form表单之获取表单的数据 创建表单 通过ant-design-vue去获取表单的数据是使用v-decorator的方式去给每个项去注册，这样才能通过组件去拉取表单的数据，同时对必填项做校验； <template> <a-form @submit="handleOk" :form="form"> // :form="form" 必须优先...
ant-design-vue v-decorator用法
最新发布
qq_42978230的博客
08-30 723
在ant-design中，v-decorator可以实现双向绑定与表单验证。即如果你使用v-decorator 你可以不用使用v-model。
河豚随心记（一） v-decorator
m0_46412695的博客
03-18 2万+
写个笔记记录下自己使用组件/插件的经历，个人经历，仅用作记录与参考，写法和解决方案各位还需鉴别，有更好的方法欢迎指导讨论。 v-decorator主要用来做antd-vue表单的表单验证，用法也很简单。 1.先在data里面定义一下验证规则 validatorRules: { orgCode: { rules: [ { required: true, message: '请选择公司名称!'}, ]
vue ant v-decorator的使用
anwenagululu的博客
09-10 789
vue ant v-decorator的使用
v-decorator和v-model的使用对比
唐诺
02-20 1397
v-model 和 v-decorator 都是在 Vue.js 框架中使用的指令，但它们的功能和用途有所不同。v-model 是 Vue.js 的一个核心特性，用于在 input、textarea 元素和组件上创建双向数据绑定。这意味着数据和视图是同步的：当数据改变时，视图也会更新；反之亦然。v-model 主要用于处理表单元素和用户输入，可以简化很多手动更新数据和视图的操作。v-decorator 是 Ant Design Vue 中的一个指令，主要用于表单验证和提交。
AntD v-decorator 孔健验证属性的使用
wenzhengjiayou的博客
07-26 798
你不能用控件的valuedefaultValue等属性来设置表单域的值，默认值可以用getFieldDecorator或v-decorator里的initialValue。你不应该用v-model，可以使用this.form.setFieldsValue来动态改变表单值。你不再需要也不应该用onChange来做同步，但还是可以继续监听onChange等事件。v-decorator是AntDesign的控件验证属性。...
给自定义组件加上v-decorator验证
月亮船
10-12 1849
目录前言1. 了解v-decorator的本质和绑定的过程2. 例子：给自定义的列表组件绑定v-decorator 前言 在项目中用ant-design-vue 来做开发，用到的表单涉及到自定义组件，想用v-decorator的机制来统一的做表单验证，通过查询antdv的官网和vue的官网有了思路,v-decorator本质上就是在v-modal的基础上加了一些验证相关的规则和功能，而v-modal是通过对组件value和 onchange函数的管理来实现表单数据的双向绑定的，那我们只要给自定义组件添加va
vue的v-decorator回显
weixin_44805962的博客
07-21 1709
编辑的会回显 <a-form-item label="名称" :labelCol="{span: 7, offset: 0}" :wrapperCol="{span: 13, offset: 0}" > <a-input placeholder="请输入" v-decorator="['name' ,{rules: [ { max: 50, message: '
ant design vue 之 v-decorator
dengfenglai825的博客
02-04 1万+
1.在 template 中直接使用 required: true 设置必填, trigger: 'blur' 设置失去焦点触发校验 <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入账号!'}],trigger: 'blur' }]" /> 2.在 script 中设置校验规则 template 部分 <a-input v-decorator="['password', val
【前端】v-decorator表单元素设置初始值和默认值
m0_64210833的博客
10-24 5371
v-decorator表单元素设置初始值、默认值
v-decorator 双向绑定
weixin_43227626的博客
08-12 1941
ant design vue表单的v-decorator可以通过this.$emit(‘change’,‘值’)
javascript设计模式之Decorator（装饰者）模式
vuturn的专栏
10-08 973
Decorator是一种结构型设计模式，用于促进代码复用，是一种可行的对象子类化的替代方案。Decorator提供了将行为动态添加到系统现有类的能力。其想法是，装饰者本身对于类原有的基本功能来说并不是必要的；否则，它就可以合并到超类本身。 装饰者可以用于修改现有的系统，希望在系统中为对象添加额外的功能，而不需要大量修改使用它们的底层代码。开发人员使用装饰者的一个原因是，应用程序可能包含需要大量不
VUE——form表单中v-decorator的使用问题
weixin_43512524的博客
09-11 3万+
1.首先v-decorator虽然以V开头但是他并不是vue自定义的组件，他是通过ant-design-vue(蚂蚁金服UI组件库)去获取表单数据时使用v-decorator方式去给每个项注册，这样不仅可以通过组件去拉取表单数据，同时对必填项做**校验 **。 2.使用时要仔细阅读组件库手册，以确保不会出现因为没有注册组件等等基础问题。 附组件库当前form表单链接地址：添加链接描述 3.具体使用 data（）： ...
antd vue中 v-decorator 的理解
weixin_43989307的博客
05-24 4488
v-decorator antd vue的理解 v-decorator是ant Design的控件验证属性 经过 getFieldDecorator 或 v-decroator 包装的控件，表单控件会自动添加 value onChange 或者 trigger ,数据同步由Form接管，这会导致以下结果 你不在需要也不应该用 onChange 同步，但是可以继续监听 onChange事件 你不能用控件的 value defaultValue等属性来设置表单域的值，默认值可以用 getFieldDecorat
Vue Antdv a-form 表单中使用自定义组件，并支持 v-decorator 效验
2401_84103844的博客
04-04 906
:placeholder=“placeholder”v-model=“valuePro”@change=“inputChange”/>
Vue Antdv a-form 表单中使用自定义组件，并支持 v-decorator 效验(1)
2401_84617969的博客
05-16 668
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
v-decorator用法
07-13
v-decorator 是 Ant Design Vue 中用于表单校验和装饰的指令，它可以用于表单元素上，用于定义表单项的校验规则和样式等。 使用 v-decorator 的基本语法如下： ```html <template> <a-form :form="form"> <a-form-item label="Username" :colon="false" :rules="rules.username"> <a-input v-decorator="['username']" /> </a-form-item> <a-form-item label="Password" :colon="false" :rules="rules.password"> <a-input-password v-decorator="['password']" /> </a-form-item> <!-- 其他表单项 --> </a-form> </template> <script> export default { data() { return { form: this.$form.createForm(this), rules: { username: [ { required: true, message: 'Please enter your username', trigger: 'blur' }, // 其他校验规则 ], password: [ { required: true, message: 'Please enter your password', trigger: 'blur' }, // 其他校验规则 ], // 其他表单项的校验规则 } } } } </script> ``` 在上面的示例中，我们使用 v-decorator 指令来装饰表单元素。它的值是一个数组，数组的第一个元素是字段名，用于绑定表单数据；后面可以是一些修饰符，如校验规则、样式等。在这个示例中，我们使用了 rules 对象来定义每个表单项的校验规则，并将这些规则传递给 a-form-item 的 :rules 属性。 通过这种方式，我们可以灵活地定义表单项的校验规则，并使用 v-decorator 来简化表单项的校验和装饰过程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

几个高兴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值