浅谈Vue+Ant Design form表单的一些坑

目录
  • 设置默认值的坑
  • 自定义 v-decorator 组件的坑

最近在用 vue + ant 写项目发现 from 组件的坑还是比较多的

设置默认值的坑

控制台报 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.

问题原因: 产生此问题的原因是 调用 setFieldsValue 方法时 入参对象设置了一些不该存 在 或页面异步判断的一些值

此时的 row 是直接调用接口拿到的数据 有一些其他不需要设置的值 如创建时间, 这时候就会报错

解决思路: 使用 lodash.pick 方法和 object.assign 来设置需要渲染表单的值

优化后:

之后又出现了新的问题, 因为页面上的异常处理是异步判断的, 使用了 serializeType 来判断是否显示, 这时候直接设置 exceptionHandler 也是会报同样的错误

解决思路: 用 promise 先设置可以直接渲染的值 其他异步判断的值二次渲染

优化后:

问题解决

自定义 v-decorator 组件的坑

控制台报: Warning: MachineMultiSelector default value can not collect, please use option.initialValue to set default value.

自定义 v-decorator 的组件需要两个基本设置, 父传子的 value 属性, 和 value 发生变化子传父的change 事件

这个问题产生的原因是 不可以给 props 的 value 设置默认值, 可以用 decorator.option.initialValue 属性设置默认值

修改后:

问题解决

到此这篇关于浅谈Vue+Ant Design form表单的一些坑的文章就介绍到这了,更多相关Vue Ant Design form表单内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • ant design vue的form表单取值方法

    ant design vue的form表单取值方法

    目录 ant design vue的form表单取值 官方中有以下两种取值方式 ant design of vue 学习之表单form v-decorator(表单验证,内置绑定,初始值) 数据获取与填充 表单实例 ant design vue的form表单取值 官方中有以下两种取值方式 因为不是很熟悉,所以还是查了文档找了一下使用方式,刚开始查到的文档是这样写的 然后返回了undefined,后来又查询了一些文档,发现我多加了一个props属性,然后使用第二个方法成功了,代码如下: ant d

  • 浅谈Vue+Ant Design form表单的一些坑

    浅谈Vue+Ant Design form表单的一些坑

    目录 设置默认值的坑 自定义 v-decorator 组件的坑 最近在用 vue + ant 写项目发现 from 组件的坑还是比较多的 设置默认值的坑 控制台报 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]&q

  • Android实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法(使用起来确实很爽),这时需要自己动手封装一些表单,同时我们还要保持方法可以继续是使用. 组件的源码    https://github.com/haozhaohang/ant-design-expand-component 下面看一下如何自己封装表单组件,这是一个最基础的表单使用例子: impor

  • Vue ElementUI之Form表单验证遇到的问题

    Vue ElementUI之Form表单验证遇到的问题

    首先说一下 我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref='number2',对应的按钮>>xxxxxx('number2').如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再

  • 使用Vue动态生成form表单的实例代码

    具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址 示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa

  • 浅谈vue中使用编辑器vue-quill-editor踩过的坑

    结合vue+element-ui+vue-quill+editor二次封装成组件 1.图片上传 分析原因 项目中使用vue-quill-editor富文本编辑器,在编辑内容的时候,我们往往会编辑图片,而vue-quill-editor默认的处理方式是直接将图片转成base64格式,导致上传的内容十分庞大,且服务器接受post的数据的大小是有限制的,很有可能就提交失败,造成用户体验差. 引入element-ui 编辑editor.vue文件 <template> <div> <

  • 浅谈vue websocket nodeJS 进行实时通信踩到的坑

    先说明,我并不知道出现坑的原因是什么.我只是按照别人的写法就连上了. 我的处境是这样的 我的前台是用了 vue 全家桶,启动了一个 9527 端口. 而我的后台是用 nodeJS,启动了 8081 端口. 很明显,这种情况就出现了头疼的跨域. 贴出我的代码,如下 server.js(后台) var app = express(); var server = require('http').createServer(app); var io = require('socket.io')(serve

  • Vue之ElementUI Form表单校验

    Vue之ElementUI Form表单校验

    表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明. 以下是form的demo el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email"

  • Vue模仿ElementUI的form表单实例代码

    实现要求 模仿 ElementUI 的表单,分为四层结构:index 组件.Form 表单组件.FormItem 表单项组件.Input 和 CheckBox 组件,具体分工如下: index 组件: 实现:分别引入 Form 组件.FormItem 组件.Input 组件,实现组装: Form 表单组件: 实现:预留插槽.管理数据模型 model.自定义校验规则 rules.全局校验方法 validate: FormItem 表单项组件: 实现:预留插槽.显示 label 标签.执行数据校验.

  • 浅谈vue同一页面中拥有两个表单时,的验证问题

    问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息 我们可以通过为两个表单添加ref属性 之后在通过调用resetFields()方法来解决问题 代码如下 <el-form :model="form" :rules="rules" ref="form" label-width="100px"> this.$refs["form"]

随机推荐