【无标题】

element-ui resetFields 无效的问题

1.问题重现

因 “添加” 和 “编辑” 字段是一样的，所以我把他们做在了一个弹框表单里面，也节省了代码资源开销，如果你是分开写的弹框也就不会出现这个问题了

通常情况下，我们在制作后台管理页面的时候经常会遇到以下操作 “新增、编辑” 等等操作，那么在编辑的时候我们通常会取到当前行的数据而进行赋值操作

触发bug的条件是先打开，编辑进行赋值，后打开新增

这个时候我们关掉弹框再去打开 “新增”

这个时候你会发现刚刚赋值过的数据还遗留在表单里面，有人会说我在弹框关闭的时候执行重置不就行了，但是这个时候你会发现并没有效果

this.$refs['formName'].resetFields()

2.关于resetFields()方法

• 1、此方法用于将form表单的数据设置为初始值
• 2、而这个初始值是在form mounted生命周期被赋值上去的
• 3、所以，在 form mounted之前，如果给form表单赋值了，那么后面调用resetFields()都是无效的，因为form表单的初始值已经在 mounted 之前就被赋值了

• 
• 
• 

3.解决办法

所以我们要在 form 表单 mounted之后再进行赋值操作这样就可以完美解决问题了
在点击编辑赋值的时候使用 “this.$nextTick” 方法即可

methods: {

    // 打开编辑
    handleOpen() {
       // 编辑
      if (this.isEdit) {
        this.$nextTick(() => {
          assignFields(this.row, this.form)
        })
      }
      //...
    },

    // 关闭编辑
    onClose() {
        // 后面我们只需在弹框关闭的时候再执行 resetFields() 方法就行了
      this.$refs.formRef.resetFields()
      this.$emit('close')
    }

}