vue3+element-plus表单重置resetFields方法不生效踩坑

前言：按照项目需求，多处都会使用dialog+form组件，而form大多都会有重置需求，但点击重置按钮，有的时候resetFields方法就仿佛失效一样。

首先需要明白resetFields方法是将表单重置为form组件dom刚渲染时的初始值

本文实现的重置是：

1、以新增按钮打开弹窗，将数据重置为数据1

2、以编辑按钮打开弹窗，将数据重置为数据2

// html
<el-dialog v-model="pa.dialog.show" :title="pa.dialog.title" @close="handleClose">
    <el-form :model="pa.dialog.form" ref="formRef">
        <el-form-item label="名字：" prop="name">
           <el-input v-model="pa.dialog.form.name" autocomplete="on"/>
        </el-form-item>
        ...
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="pa.dialog.show = false">取消</el-button>
        <el-button @click="resetEvent">重置</el-button>
        <el-button type="primary" @click="sureSubmit">确定</el-button>
      </span>
    </template>
</el-dialog>

情景一：如果打开修改弹框时，数据时直接传递过来的

const pa = reactive({ //数据1
    dialog:{
        form:{
            name:'',
            age:10
        }
    }
})
const backupData = JSON.parse(JSON.stringify(pa.dialog.form))

// 这是打开dialog弹框的事件
const openDialogEvent = (v1:string,v2?:any) => {
  pa.dialog.show = true
  pa.dialog.type = v1
  if(v1 == '1') { //add
    pa.dialog.title = '新增'
  }else {
    pa.dialog.title = '修改'
    pa.dialog.form = v2  // --------------------- 这里很重要，数据2
  }
}

const resetEvent = () => {
  formRef.value.resetFields()  // 此时的resetFields方法没有任何问题
}

// 当你点击了编辑按钮使得 pa.dialog.form获取了新数据（称为数据2）
// 但当你关闭弹框时， pa.dialog.form值依然是数据2，并不会变回为数据1
// 当你再点击新增按钮时，会导致form组件显示的数据是数据2
// 因此笔者给弹框设置了一个关闭事件
const handleClose = () => {
  // 这一步是防止（仅用下面这一步的话）点击增加在里面输入内容后关闭第二次点击增加再输入内容再关闭再点击增加会出现未初始化
  formRef.value.resetFields()  
  // 这一步是防止(仅用上面那一步)先点击编辑后再关闭弹窗再点击增加，显示的为数据2
  pa.dialog.form = backupData 
}

情景二：如果打开修改弹框时，数据是请求的接口

const pa = reactive({  //数据1
    dialog:{
        form:{
            name:'',
            age:10
        }
    }
})
let backupData = "{}"

// 这是打开dialog弹框的事件
const openDialogEvent = (v1:string,v2?:any) => {
  pa.dialog.show = true
  pa.dialog.type = v1
  if(v1 == '1') { //add
    pa.dialog.title = '新增'
  }else {
    pa.dialog.title = '修改'
    _findInfoById({id:v2.id}).then((res:any) => {
        pa.dialog.form = res.data   // 数据2
        backupData = JSON.stringify(res.data)  // -------------很重要
    }) 
  }
}

// 当你点击编辑按钮打开弹窗时，dom刚渲染的数据依然是数据1
// 因此调用resetFields()方法，重置显示的是数据1
// 解决如下
const resetEvent = () => {
  formRef.value.resetFields() 
  if(pa.dialog.type == '2') {
    pa.dialog.form = JSON.parse(backupData)
  }
}

// 这一步依然必须存在，否则当你点击新增按钮输入内容（数据3），关闭后，再点击新增按钮，显示的就是数据3
const handleClose = () => {
  formRef.value.resetFields() 
}

补充一下：

1、form组件上必须要有ref

2、form-item上必须要有prop属性

3、情景一不能使用nextTick

const openDialogEvent = (v1:string,v2?:any) => {
  pa.dialog.show = true
  pa.dialog.type = v1
  if(v1 == '1') { //add
    pa.dialog.title = '新增'
  }else {
    pa.dialog.title = '修改'
    // 如果使用了这个，那么弹框dom渲染时获取到的依然是数据1
    // 那么不能实现将弹框的参数值重置为传递过去的v2数据
    // 如果非要使用，想要实现本文的重置效果，其做法与情景二一样
    nextTick(()=>{
        pa.dialog.form = v2
    })
  }
}