夏天想
夏天想

element-ui报错Cannot read property 'resetFields' of undefined

[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined"

element-ui报错Cannot read property 'resetFields' of undefined_第1张图片

这个错误是因为你的dom元素还没有加载完，你就想使用resetFields置空。也就是你写的this.$refs['addForm'].resetFields();这个里面的addForm还没有加载出来呢。

解决：

this.$nextTick(()=>{

   this.$refs['addForm'].resetFields();

})

 

你可能感兴趣的:(element-ui)

  • element-ui中，使用this.$message.success(“登录成功“)，如何修改文字的样式呢？
    在element-ui中使用this.$message.success(“注册成功”);时，直接修改文字样式并没有暴露出很方便的接口，因为ElementUI的消息提示组件Message是通过JavaScript动态创建的。但是你可以通过以下方法自定义消息的样式：方法1：使用customClass属性ElementUI的Message组件提供了customClass属性，可以为消息框添加自定义的类名
  • element-ui表单验证信息如何以弹窗的形式出现 汪叽家的兔子羡 uijavascript开发语言
    一、需求在进行表单验证的时候,表单提示部分业务需要弹出窗口提示二、实现1.主要代码：主要在else部分submitForm(formName){this.$refs[formName].validate((valid,obj)=>{if(valid){console.log('submit');}else{varfail=[];for(letkeyinobj){fail.push(obj[key]
  • Element Plus上传组件二次封装，支持多类型多文件单次上传 m0_55398820 组件vue.js前端
    最近公司框架改用vue3了，项目多数都是后台管理系统，所以在网上各种找着有没开源的上传组件支持多类型多文件单次上传，找了好久都无果，所以只好自己改了一个并分享一下成果依赖方面的话使用了：element-ui、v-viewer、viewerjsnpminstallv-viewerviewerjs代码方面就比较粗糙+粗暴了，组件还有很多可以升级改造的地方，只不过我这切图仔还有很多业务代码要写，所以有优
  • element-ui 轮播图的使用 b49779e26200
    element-ui轮播图的使用```exportdefault{name:"Banner",data(){return{//图片地址数组img_list:["./banner1","./banner1","./banner1","./banner1"],//图片父容器高度bannerHeight:1000,//浏览器宽度screenWidth:0};},methods:{setSize:func
  • element-ui 多级树形表格加多选的效果 一个很哇塞的爷们 vue
    实现多级表格加多选的效果父级表格点击具有全选、全不选的功能，点击部分子级表格，父级表格实现半选中的状态template页面展示部分：//表头单元格的style的回调方法，也可以使用一个固定的Object为所有表头单元格设置一样的Style。data数据部分：data(){return{renderDynamic:[{id:1,parentId:0,date:"2016-05-02",name:"王
  • Vue Element-UI下拉框搜索功能 逆风g
    要实现这样的功能：上代码：核心：给下拉框新增加属性filterable:filter-method=dataFilter//下拉框开启搜索功能dataFilter(val){if(val){this.showEquipments=this.equipments.filter((item=>{returnitem.equipments.includes(val)}))}else{this.showE
  • Web端版本更新提示--前端处理 扶我起来还能学_ 前端javascriptvue.js前端框架
    Web端版本更新提示–前端处理原理：webpack每次打包jshash值不同import{MessageBox}from'element-ui'letlastScripts=[]//最新一次js文件src名constDURATION=5*60*1000//设置5分钟检查更新一次//提取html中的script标签的src属性asyncfunctionextractNewScripts(htmlSt
  • 如何在vue3.0项目中集成Element-plus 卖菜的小白 vue面试vueelement-plus
    一、Element-plus简介Elementplus是一套为开发者，设计师和产品经理准备的基于vue3.0的桌面端组件库。之前在vue2中都使用element-ui，而element-plus是针对vue3开发的一个ui组件库。二、基本使用安装element-plusnpminstallelement-plus2.1、全局引入一种引入element-plus的方式是全局引入的方式，代表的含义是所
  • element-ui 之 InputNumber 组件的步长功能分析 rongrongVivian Element-ui组件库前端javascriptvue.jselementui
    此篇将分析element-ui的InputNumber组件中的步长功能的源代码。一.步长功能描述步长是指接收一个step属性，以传入的step作为步长，每次递增或递减以一个step为单位进行。二.步长与严格步长的区别在InputNumber组件中，如果只是设置了步长，没有设置严格步长，可以通过输入框输入的方式，输入不符合步长的数值。如果一旦设置了严格步长，在输入框中输入不符合步长的数值时，会被计算
  • element-ui 关于树形结构el-tree的笔记
    首先尝试了下懒加载。发现是时候会出现无法加载数据以及数据重新加载的问题，古世勇一次性给加载上去。首先说一次性加载的适用方法先确定tree的配置文件label:'name',chcildren:'children',isLeaf:'leaf'看官网说明label就是你显示ui的值chcildren就是你下级目录的全部数据isLeaf指定一个字段是否为子节点。为ture时不为子节点所以数据结构为dat
  • 解决element-ui中组件【el-upload】一次性上传多张图片的问题 微风拂晚霞 Web前端前端vue.jselement-uiNode.jsmulter
    element-ui中的组件el-upload默认的行为是一张图片请求一次，在项目需求中，通常要求多张图片只向后台发送一次请求，下面的做法就可以解决这样的需求前端发布exportdefault{data(){return{formData:{},}}methods:{//绑定在http-request,覆盖上传事件uploadFile(file){this.formData.append("blo
  • vue + element-ui 季度选择器组件 el-quarter-picker
    使用说明1、复制组件文件ElQuarterPicker.vue到项目（依赖element-ui），组件源码在后面2、引用并调用组件     importElQuarterPickerfrom'./ElQuarterPicker' exportdefault{ components:{ElQuarterPicker}, data(){  return{   value:''  } }}ElQuart
  • el-select下拉选择不回显问题和下拉框显示数字问题
    在使用Vue开发使用element-ui时，el-select下拉框出现在点击选择的时候数据无法显示的问题。解决方案：需要使用forceUpdate强制刷新在没有绑定事件时直接在change上绑定forceUpdate：@change="$forceUpdate()"
  • element-ui手机区号+手机号
    需求场景项目开发中对方要求手机号带上全球区号需求分析项目使用的是若依前端框架，element-ui的框架。尝试使用已经网上的组件vue-country-intl等发现不怎么适配element-ui的样式等。这还不是关键的，关键的是弹窗中使用这些组件发现区号的下拉展示框展示不全，层级存在问题，设置css的z-index等相关属性也不能有效处理。于是决定手搓一个element-ul下拉的区号，支持国际
  • element 消息提示始终只出现一个 孔唯一 vuejavascriptvue.js前端elementui
    原理就不多解释了直接上代码新建js文件用来存放一下代码(js名字可以根据自己喜好命名)我这里直接命名为了message.jsmessage.js//单独引入Message引入之前一定要确定element已经安装import{Message}from'element-ui';letmessageInstance=null;constresetMessage=(options)=>{if(messag
  • element UI防止多个message弹窗，el-message提示只显示最后一个 不怕不管 elementUIvuejsvue.jshtml
    单独一个文件重写messageimport{Message}from'element-ui'letmessageInstance=nullconstresetMessage=(options)=>{if(messageInstance){messageInstance.close()}messageInstance=Message(options)};['error','success','inf
  • 如何让Element UI的Message消息提示每次只弹出一个
    ElementUI的Message消息提示是点击一次触发一次的。在封装接口中调用失败会返回多个弹窗，导致很不友好，所以就出了一下参考解决方案import{Message}from'element-ui'constshowMessage=Symbol('showMessage')classDonMessage{success(options,single=true){this[showMessage
  • webstorm中element-ui标签无法跳转源码 Hong.1948 webstormuiide
    原本用的webstorm2019,之前的项目开发时切实体验过跳转element-ui源码，觉得很香。更新了webstorm至2024，居然不行了，能弹出来提示，但就是找不到定义。不知道是不是2024版本的问题，node_moudles不管我是否手动添加exclude,它显示的都是exclude如下图：下列方式都尝试过了，没用：node_moudules设置为notexcludeLanguage&F
  • 推荐使用：Vue-Cron —— 简易CRON表达式生成器 乌昱有Melanie
    推荐使用：Vue-Cron——简易CRON表达式生成器项目地址:https://gitcode.com/gh_mirrors/vu/vue-cronVue-Cron是一款专为Vue.js和Element-UI设计的高效、易用的CRON表达式生成插件。它能帮助开发者轻松创建和管理定时任务策略，提供直观的界面和完善的国际化支持。项目介绍Vue-Cron提供了一个简洁的交互界面，让用户能够通过可视化的操
  • 【element-ui】el-date-picker 组件 type=“monthrange“ 选择时间段操作异常 生活、追梦者 项目实战业务组件开发uivue.js前端
    element-ui的el-date-picker组件在选择月份区间时发了这么一个bug。在选择起始月份后关闭了选择面板，再次打开后上次选择的值还存在但是看了所有的属性和方法都没有发现可以清除上次选择的值，也在网上各种搜索没找到解决办法，经过各种办法处理后得到了最简单处理方式,就是利用key值的变化重新渲染组件
  • element 日期选择图标_element-ui日期组件DatePicker设置日期选择范围Picker Options 认知能力训练 element日期选择图标
    element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期,订票时间要限制日期范围官网提供了picker-options参数可以设置日期选择范围,具体操作看代码//页面引入组件,加上picker-options这个参数v-model="exCheckDate
  • 【ElementUI】日期选择器时间选择范围限制 前端Joy姐 elementUI
    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细，这里做一个element-ui日期插件的补充。官方文档中使用picker-options属性来限制可选择的日期，这里举例子稍做补充。单个输入框的组件代码：情景1:设置选择今天以及今天之后的日期data(){return{pickerOptions0:{disabledDate(time){returntime.g
  • 报错 @import “~element-ui/packages/theme-chalk/src/index“； 资深柠檬精 前端elementui
    报错@import"~element-ui/packages/theme-chalk/src/index";具体报错报错原因具体报错SassError:Can’tfindstylesheettoimport.@import“~element-ui/packages/theme-chalk/src/index”;src\views\login\theme\element-variables.scss
  • Vue + element-ui实现动态表单项以及动态校验规则 洛千陨 Vue项目需求实现vue.js前端
    Vue+element-ui实现动态表单项以及动态校验规则情境项目需要实现一个功能，表单中某个表单项产品id支持动态新增多个产品id表单项，每个产品id表单项都需要有校验规则，校验失败时各自有对应的校验提示重点分析表单对象内字段并非固定，需要根据交互动态新增表单校验规则并非固定，需要根据字段新增动态新增对应校验规则接口提交时并非提交多个产品id字段，需要将多个产品id文本字段整合为一个产品id数组
  • Element-ui中Table表格无法显示 wangshuo（24考研上岸版） vueElementUITablevue.jselementuitable标签
    Element-ui中Table表格无法显示在使用过程中发现样式正常显示但是table就是不显示，研究了一段时间后，发现问题是项目结构的问题当你创建vue和安装el的时候，一定要注意进入到正确的项目文件夹，如果在外面也出现一个package.json文件夹，那就是你安装el的时候没有进入到项目文件夹安装el，导致el安装到项目文件夹外面了，这样el也是能运行的，数据也能传到前端，但就是不显示<
  • elementUI的el-backtop(返回顶部)不生效 时无诳语Imp vueelementuivue.jsjavascript
    1.问题：使用el-backtop时，指定target对象为父级元素后不显示目前我采用的方法是简单粗暴的删除target不指定对象，也是能显现按钮，并且回到顶部。有时间可以研究下Element-ui不用多说，用Vue的基本都会用到它。但是它的官方文档却有些不严谨的地方，最近我就在弄一个返回顶部的功能的时候遇到坑了。废话不多说，先上官方文档示例介绍：Scrolldowntoseethebottom-
  • 输入框无法编辑(使用Element-ui中el-input) BarryKerrigan vue.js前端elementui
             在与后端联调时，可以接收到参数；对input进行编辑使用方法@input进行输出，可以看到输入的内容，但输入框的数据无跟新。问题:视图无更新解决方法:this.$forceUpdate();change(e){this.$forceUpdate();}
  • 在Vue2项目中引入ElementUI详细步骤
    1.使用npm安装ElementUI，安装好后在package.json文件查找element-ui是否安装好npmielement-ui-S2.在main.js中引入element-uiimportVuefrom"vue";importAppfrom"./App.vue";importElementUIfrom'element-ui';import'element-ui/lib/theme-ch
  • 1若依系统配置部署
    若依系统简介若依概述若依微服务版RuoYi-Cloud，基于SpringBoot、SpringCloud&Alibaba、OAuth2的前后端分离的后台管理系统。RuoYi-Cloud是一个JavaEE企业级快速开发平台，基于经典技术组合（SpringBoot、SpringCloud&Alibaba、OAuth2、Vue、Element-UI），内置模块如：部门管理、角色用户、菜单及按钮授权、数据
  • vue + element-ui 季度选择器组件 el-quarter-picker 0716*_zwj vue.jsuijavascript
    最近项目中需要用到季度选择器控件，无奈element-ui框架没有，想着自己实现一个出来，参考的日期选择器实现的参考链接：vue+element-ui季度选择器组件el-quarter-picker-CSDN博客https://blog.csdn.net/qq1370151551/article/details/118811216ElQuarterPicker.vue{{title}}{{view
  • 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
  • JDK timer antlove javajdkschedulecodetimer
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
  • JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
  • JDBC连接数据库 Array_06 jdbc
    package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
  • Unsupported major.minor version 51.0（jdk版本错误） oloz java
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
  • 用多个线程处理1个List集合 362217990 多线程threadlist集合
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
  • JSP简单访问数据库 香水浓 sqlmysqljsp
    学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
  • Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
    1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
  • 查询汇总的sql baalwolf sql
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
  • Linux du命令和df命令区别 BigBird2012 linux
            1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
  • AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
  • 【Java命令一】jmap bit1129 Java命令
    jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
  • Apache 服务器安全防护及实战 ronin47
    此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
  • unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
    问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
    import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
  • struts2更改struts.xml配置目录 chiangfai struts.xml
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
  • redis做缓存时的一点优化 chenchao051 redishadooppipeline
            最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
  • mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
  • 爱情格言 dcj3sjt126com 格言
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
  • 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
  • win7安装MongoDB服务 geeksun mongodb
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
  • Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
  • 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
  • Linux各个目录的作用及内容 pda158 linux脚本
    1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
  • ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
    获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
  • 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
            哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他