关于 ant-design-vue resetFields 失效

这篇具有很好参考价值的文章主要介绍了关于 ant-design-vue resetFields 失效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

关于 ant-design-vue resetFields 失效

背景:
遇到这样的问题使用ant-design-vue useForm来制作表单的时候,resetFields()失效

场景:
编辑 -赋值
新增-初始值(问题点:新增的时候他就不初始化

方案:
1、调用resetFields() 传参
关于 ant-design-vue resetFields 失效,vue.js,前端,javascript
2、要么使用reactive 明确定义初始值
关于 ant-design-vue resetFields 失效,vue.js,前端,javascript

解释:
首先我这里讲一下源代码中的逻辑

useForm代码

关于 ant-design-vue resetFields 失效,vue.js,前端,javascript
1、首先我讲一下我这里为什么不生效,因为我在定义初始值的时候,并没有给准确的modelRef定义

const modelRef = reactive({} as SomethingInterface);

因为我是使用typescript不想给他一个一个定义,所以根据源码看的话,我的initialModel就是个{}
所以我每次调用resetFields()的时候都是 modelRef, 所以他就没变

2、 为了解决这个问题,我这里是有3个方案

  • 第一是我没看源码前,直接粗暴的方式
// 清空对象,将其属性设置为空对象
Object.keys(obj).forEach(key => delete obj[key as keyof typeof obj]);
  • 第二是我看源码后,resetFileds()的时候传值 resetFileds({name:""})
  • 第三是按照官网文档一样,老老实实的定好

关于 ant-design-vue resetFields 失效,vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-798714.html


好了, 我这里说完了,继续敲代码

到了这里,关于关于 ant-design-vue resetFields 失效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ant-design-vue表格Table行内新增、编辑、删除

    ant-design-vue表格Table进行单元格内新增、编辑、删除等操作 如图所示:

    2024年02月14日
    浏览(43)
  • ant-design-vue 4.x升级问题-样式丢失问题

    该文档是在升级ant-design-vue到4.x版本的时候遇到的问题 以上是开发项目时使用的包以及包的版本,使用的脚手架是vite 当使用ant-design-vue3.x版本时没有任何问题,但是当升级ant-design-vue到4.0版本时,因为ant-design-vue4.x使用了css-in-js需要修改vite.config.js配置 变更为 修改后当开发环

    2024年02月14日
    浏览(42)
  • Ant-design-vue AutoComplete 自动补全组件的使用

    AutoComplete 是一个输入框自动完成功能,在输入时提个建议或者辅助提示。 和 Select 的区别是: AutoComplete 是一个带提示的文本输入框,用户可以自由输入,是辅助输入 Select 是在限定的可选项中进行选择,是选择。 使用案例如下: filterOption 是否根据输入项进行

    2024年02月12日
    浏览(48)
  • ant-design-vue中upload上传图片、视频实现预览功能

    有没有小伙伴在使用ant-design-vue的upload组件时,发现api文档在图片预览功能的介绍寥寥无几,而且也没提供视频预览的demo,在实际开发中碰到相应的需求直挠头~~~~,别急,下面来给大家分享一个我自己封装的upload组件,符合需求可以直接在项目中放到组件目录调用。 templat

    2024年02月12日
    浏览(45)
  • [ant-design-vue] table组件列宽拖拽功能

    原有的样式文件没有使用的必要,个人添加的部分样式内容就符合需求了 vue3.x对应的ant-design-vue中的table组件本身支持列宽的拖动了,不需求额外的包的支持,根据Api说明设置resizeColumn即可

    2024年01月23日
    浏览(49)
  • vue2安装ant-design UI报错 ERR! peer vue@“>=3.2.0“ from ant-design-vue@3.2.15

    npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: default@0.1.0 npm ERR! Found: vue@2.7.14 npm ERR!   vue@\\\"^2.6.10\\\" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@\\\"=3.2.0\\\" from ant-design-vue@3.2.15 npm ERR! node_modules/ant-design-vue npm ERR!   ant-design

    2024年02月01日
    浏览(55)
  • ant-design-vue的table表格行合并和列合并

    场景说明: 1、列合并:需要在表格最后一列进行合并,如图: 思路:相当于是第二列的最后一栏(colSpan )占比5列,第2列后面的4列最后一行(colSpan )占比0。 代码示例 行合并需求如图:将指定列的多行合并成一行 思路:和合并列差不多;第一列的第一行和第二行要合并

    2024年02月16日
    浏览(40)
  • 【ant-design-vue】实现table的拖拽排序(拖拽行和伸缩列):

    1.效果: 拖拽前: 拖拽后: 2.实现: 3.出现的问题: 4.初始拖拽版本: 5.相关知识:

    2024年02月12日
    浏览(40)
  • ant-design-vue中table组件使用customRender渲染v-html

    ant-design-vue遇到table中列表数据需要高亮渲染 1、customRender可以使用,但是使用v-html发现不生效还报错 2、customRender函数返回肯定是jsx语法,于是发现这样写可以

    2024年02月15日
    浏览(53)
  • vue3中使用ant-design-vue的layout组件实现动态导航栏功能(1~2级)

    目录 0 前言 1 准备工作 1.1 安装ant-design-vue 1.2 安装图标组件包 2 选择组件 3 路由文件 4 Vue导航页面 5 最终效果         最近在自己搞一个前后端小项目,前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑,但是网上的资料较少,所以我就自己整合实现了一下,在此

    2024年02月15日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包