精华内容
下载资源
问答
  • vue element form resetFields不生效解决方案 参考: https://segmentfault.com/a/1190000022516459 editButton(addressConfig) { this.$nextTick(() => Object.assign(this.addressConfig, addressConfig)) ...

    vue element form resetFields不生效解决方案

     editButton(addressConfig) {
          this.$nextTick(() => Object.assign(this.addressConfig, addressConfig))
        },
    
    展开全文
  • 在a-tab-pane标签中加上forceRender的属性,将值赋为true,则会清空所有tabs的内容

     

    在a-tab-pane标签中加上forceRender的属性,将值赋为true,则会清空所有tabs的内容

    展开全文
  • 当我点击修改按钮,数据回显,这时候点击叉,在点击新增按钮的时候表单数据没有重置(清空),但是我在新增按钮的回调里,明明调用了表单的resetFields()方法,这个方法为什么不生效呢? 代码分析 伪代码 当我点击...

    问题描述

    当我点击修改按钮,数据回显,这时候点击叉,在点击新增按钮的时候表单数据没有重置(清空),但是我在新增按钮的回调里,明明调用了表单的resetFields()方法,这个方法为什么不生效呢?

    代码分析

    伪代码

    1. 当我点击修改按钮的时候,直接给表单赋值
    this.form = {...row}
    
    1. 点击新增按钮调用resetFields()方法
    if (this.$refs['ref_form'] !== undefined) {
      this.$refs['ref_form'].resetFields();  
    }
    

    不生效原因

    当我点击修改的时候,紧接着我就给表单赋值,但是这个时候dialog还没有执行完毕,等dialog执行完毕,回显的值已经赋上去了,这个时候回显之后的值就会被当成默认值,所以点击新增按钮的时候调用resetFields()方法,看上去是没反应,没有执行,其实是执行了,只是你的默认值就是回显之后的值

    解决问题

    在修改打开dialog的时候,不要着直接复制,在nexttick里赋值,或者加个定时器赋值

    调用resetFields不生效的其他原因

    1. 检查ref有没有绑定对
    2. prop有没有都对应上
    展开全文
  • el-form中设置resetFields方法不生效前置知识点问题描述问题代码定位问题使用排除法可以看到代码里都有体现,排除代码编写问题,去查看文档,尝试定位是组件在初始渲染过程中保留的初始值问题。问题分析解决办法show...

    前置知识点

    1. Event loop
    2. 宏任务与微任务

    问题描述

    第一次访问页面,先进行查看、编辑动作,操作结束退出el-dialog时,el-form绑定的数据与校验信息均无法置空,且后续每次退出时不带值进入,el-form初始值始终为第一次访问页面的值,且非刷新页面无效。

    问题代码

    // 弹窗
     <el-dialog :visible.sync="dialogShow">
        <el-form ref="refForm" :model="form">
           <el-form-item label="标题" prop="name">
             <el-input v-model="form.name"></el-input>
           </el-form-item>
         </el-form>
     </el-dialog>
    
    // 重置表单信息
     resetForm() {
       this.dialogShow = false;
       this.$refs.refForm.resetFields();
     },
     
    // 查看行元素   
    skipBtn(row) {
       this.dialogShow = true;
       this.form = JSON.parse(JSON.stringify(row));
    },
    

    定位问题

    使用排除法

    1. 表单上没有添加ref属性?
    2. el-form-item没有添加prop属性?

    可以看到代码里都有体现,排除代码编写问题,去查看文档,尝试定位是组件在初始渲染过程中保留的初始值问题。
    在这里插入图片描述

    问题分析

    借鉴了

    1. element-ui的resetFields方法不生效的原因及解决方法
    2. 一文搞懂JS系列(六)之微任务与宏任务,Event Loop
    3. JavaScript 运行机制详解:再谈Event Loop

    在页面初始化过程中,若直接对form赋值, 即

    this.form = JSON.parse(JSON.stringify(row));
    

    由于Dialog未渲染完毕, 初始值将为第一次对form赋值结果而非空值。

    解决办法

    知道了问题所在,问题就解决一半了,不多说

    show you code

    // 查看行元素   
    skipBtn(row) {
       this.dialogShow = true;
       this.$nextTick(() => {
       		this.form = JSON.parse(JSON.stringify(row));
       }
    },
    

    分析

    由于Dialog未渲染完毕,才导致初始值将为第一次对form赋值结果而非空值,那么只需在Dialog渲染结束后才给form赋值就OK了。

    这里添加$nextTick,就将赋值过程移出同步任务队列放到微任务队列,当Dialog 渲染完毕后才进行赋值,完美的解决了问题。

    展开全文
  • element el-table resetfields() 不生效 问题场景 表单中的重置按钮,调用了resetfields() 方法,不生效 问题原因 结合文档对照后,发现是没有为el-form-item设置prop字段 总结 想让resetfields()生效有2个...
  • resetFields()不生效

    2021-04-02 13:34:37
    没有prop属性
  • 1.1、先打开新增弹出框(没有值)再打开修改弹出框(赋值),resetFields()方法可以生效! 1.2、先打开修改弹出框(赋值),再打开新增弹出框(没有值),此时resetFields()方法不再生效!不管新增还是修改,...
  • 使用 Ant Design Vue 的 resetFields 重置表单,当新增表单和编辑表单公用一套样式的时候, 编辑完成后点击新增还会出现老数据,如果只是简单的新增则一切正常,知道各位有没有遇到这个问题 几经搜索: 发现 ...
  • 从 iView 转过来写 Ant Design Vue,还是有些不同的地方。比如在用 Form 表单时 发现清空表单功能竟然不好使...--没加name不生效!!相当于iView中的prop--> <a-form-item label="节点名称"> <a-input v
  • 问题重现 因 “添加” 和 “编辑” 字段是一样的,所以我把它们放在了一个弹框表单里面,也节省...form的@closed 方法调用了resetFields,但没有生效 resetForm() { this.$refs['form'].resetFields(); }, 2.rese...
  • element-ui的resetFields()方法不生效的原因及解决方法

    千次阅读 多人点赞 2020-05-18 17:11:25
    问题描述: 先调用编辑回显再调用新增 this.$ref['form'] .resetFields()无法重置表单项 原因: 调用编辑的时候,表单的初始值被设置为回显的值,每次重置时只是重置为初始值,不是空值。...在设置回显值的时候,
  • 问题描述:antd + rc-form中使用resetFields()重置表单至初始值方法不生效? 问题分析:查找好多资料,后来发现是form表单没有关联起来 form表单没有关联起来,可以在组件定义的时候,通过下面代码将form表单关联...
  • el-form的resetFields如何对checkbox生效

    千次阅读 2018-04-07 14:33:21
    遇到一个问题:el-form的resetFields对checkbox不生效 网上的方法: 官网上说:resetFields 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果; 后来发现,是每个el-form-item属性中没有加 prop=...
  • 由于最后在做公司后台在使用 element-ui 框架,开发过程中出现 resetFields表单无法重置的问题,在此记录下解决的办法,也能帮助到以后的同学少踩点坑 1.问题重现 因 “添加” 和 “编辑” 字段是一样的,所以我把...
  • 1. resetFields() 表单中的重置按钮生效有 2 个条件 ✦ form 要设置 ref 属性,且 ref 属性值要和 this.$refs[formName].resetFields() 中的 formName 一致 ✦ 表单域 el-form-item 上需要设置 prop 属性,表单 ...
  • -------下面为正确示例----------------------------- 然后看resetFields()使用的地方: init() { this.visible = true; this.getPlantList(); this.$nextTick(() => { // this.$refs["dataForm"].resetFields();//...
  • 由于最后在做公司后台在使用 element-ui 框架,开发过程中出现 resetFields表单无法重置的问题,在此记录下解决的办法,也能帮助到以后的同学少踩点坑 1.问题重现 因 “添加” 和 “编辑” 字段是一样的,所以我把...
  • 由于最后在做公司后台在使用 element-ui 框架,开发过程中出现 resetFields表单无法重置的问题,在此记录下解决的办法,也能帮助到以后的同学少踩点坑 1.问题重现 因 “添加” 和 “编辑” 字段是一样的,所以我把...
  • 出现问题:编辑 或 查看数据回显后,调用 that.$refs[“formName”].resetFields() 方法不生效,即数据还是上次 编辑 或 查看 后的数据,没有清空 问题原因:当我们在进入页面后,第一次打开弹出框时,紧接着就...
  • element 的 Form 组件提供了...2.prop 设置的字段名要和 v-model 绑定的字段名一致,否则重置表单或进行自定义校验规则时不会生效。 仅使用重置功能时具体校验规则不必填,但要重置的字段一定要有对应的 prop。 ...
  • Object.assign({}, this.ruleForm, this.$options.data().ruleForm) 这种方式来清数据,用了这么久的form表单,resetFields真的是有时候生效有时候又不生效的,于是看了下Element源码,终于发现了其中的奥秘 ...

空空如也

空空如也

1 2 3
收藏数 43
精华内容 17
关键字:

resetfields不生效