Vue3中Element-plus 表单resetFields失效，不能重置该表单项，使用$nextTick解决问题

一： 常见的失效问题

这里我们先说常见的失效问题，常见失效无非就是ref没绑定，表单项prop没写，仔细检查一遍即可,如图：

1.先定义一个空的ref

 2.绑定组件

3. 表单项的prop要和form表单绑定的数据对应起来

4.传入绑定的ref组件

 5. 重置函数

 

---

二：赋完值之后显示表单，表单重置失效   （本文重点！！！）

Element-plus 表单resetFields失效，不能重置该表单项，准确的来说是赋值后不能重置表单项，这里有个坑，也不算坑吧，算是很多人忽视的点。

1. 遇见问题

今天做项目遇见这么一个问题：

 当我点击缴费通知时，系统如弹出一个对话框，对话框的内容是根据表格的内容 渲染而来

 而我在Vue3中一开始是这么写的：

const showMsgBox = (value:any) => {
    dialogVisible.value = true    //显示对话框
    //表格数据赋值给对话框所需要的数据
    dialogForm.startdate = dateFormat(value.startdate)    //格式化时间后赋值
    dialogForm.enddate = dateFormat(value.enddate)        //格式化时间后赋值
    dialogForm.orderpay = value.orderpay
    dialogForm.orderstatus = value.orderstatus
    dialogForm.note = value.note
}

乍一看没问题，但是当我使用 重置 时发现不生效了

2. 解决问题

我们先看一下文档：

 重置该表单项，将其值重置为初始值，并移除校验结果，

重点来了，文档说的是重置为初始值，当我们打开对话框时，我们已经赋值完毕了，所以使用resetFields会重置到赋完值的状态

这里，我们借助nextTick去修改数据渲染页面：(不要忘记引用nextTick)

const showMsgBox = (value:any) => {
    dialogVisible.value = true     // 显示对话框
    // 等待下一次 DOM 更新刷新后赋值
    nextTick(() => {
        dialogForm.startdate = dateFormat(value.startdate)
        dialogForm.enddate = dateFormat(value.enddate)
        dialogForm.orderpay = value.orderpay
        dialogForm.orderstatus = value.orderstatus
        dialogForm.u_id = value.id
        dialogForm.note = value.note
        dialogForm.reply = value.reply
    })
}

 大功告成可以调用resetFields重置了！