美文网首页
Vue中element-ui的resetFields()方法重置

Vue中element-ui的resetFields()方法重置

作者: 黎明的叶子 | 来源:发表于2021-02-25 10:52 被阅读0次

    出现resetFields方法不起作用的情况如下:

    1.当新增和编辑都同用一个弹窗实现的时候,此时无法达到清除表单的效果。
    查看官网地址介绍,注意:resetField()方法不是将表单重置为空,而是重置为初始值
    而这个初始值是如何定义的呢?
    我尝试了一下,初始值的定义应该为第一次打开弹窗的值。换句话说,如果是打开新建的表单,那么初始值就都为空,如果打开是编辑的弹窗表单,那么初始值就为编辑的。(具体没有看源码深层次确定)

    2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致

    <el-form ref="refFormData" :model="formData" label-width="80px" size="mini">
      <el-form-item label="用户名称" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
    </el-form>
    

    解决方法

    针对一
    我手动清空了一下formData的数据。
    注意点,清空不可以直接等于{}。我采取的方法为写一个公共的方法,递归将其属性都赋值为null 或者 ""。如下方式不可取

    this.formData={} 
    // 这种写法有弊端,相当于对其重新赋值,会将其中的属性都改为不是双向绑定都数据。(由于vue双向绑定原理决定)
    // 所以不要这样写
    

    那何时清空这个数据最合理呢?
    我选择在弹窗关闭的事件回调中清空。原因为点击取消关闭弹框要清空,点击确定完成操作要清空,点击关闭要关闭并清空,点击空白也是关闭弹窗并清空。所以选择弹框的closed回调中清空数据。

    // 弹框关闭事件 - 清空所有数据,保留属性
    clearAllFormData(){   
        this.$refs['refFormData'].resetFields()  // 这里可以换做移除样式的方法clearValidate
        this.formData = copyProps(this.formData)  
     }
    

    针对二
    检查属性对应的。确保书写没问题。

    相关文章

      网友评论

          本文标题:Vue中element-ui的resetFields()方法重置

          本文链接:https://www.haomeiwen.com/subject/yacufltx.html