关于vue3+element plus，el-dialog里表单重置问题

最近项目一直用vue3+element plus，发现el-dialog里form表单 el-form使用 resetFields() 并没有想象中会重置弹窗的表单项和表单验证状态。经过好长一段时间之后，突然明白了为什么。

首先，父组件引用子组件，子组件为弹窗el-dialog 下面是父组件示例

下面是子组件示例：

如果我们的子组件里的showEdit 是这样子写的话

const showEdit = async (row) => {
    console.log('row', row)
    if (row) {
      state.isEdit = true
      state.title = '编辑素材'
      state.form = Object.assign(state.form, row)
    } else {
      state.isEdit = false
      state.title = '新增素材'
    }
    state.dialogFormVisible = true
  }

我们会发现，表单项初始值会是你第一次打开时的数据

这样的原因是因为，我的代码是写在setup语法糖里，并且未执行showEdit时，el-dialog里的实例都为生成，el-form自然没有生成，所以模板确实给el-form绑定了state.form，然而el-form实例未挂载，也就没有初始值。当执行完showEdit后，state.dialogFormVisible = true，此时state.form已经被改变，el-dialog显示，el-form实例挂载，el-form初始值就变成了已经被改变的state.form的值。

知道了原因 那么我们可以用最简单的方式解决

使用nextTick。确保组件实例渲染完成之后，再进行表单项数据的改变。

const showEdit = async (row) => {
    console.log('row', row)
    if (row) {
      state.isEdit = true
      state.title = '编辑素材'
      nextTick(() => {
        state.form = Object.assign(state.form, row)
      })
    } else {
      state.isEdit = false
      state.title = '新增素材'
    }
    state.dialogFormVisible = true
  }

又或者

const showEdit = async (row) => {
    console.log('row', row)
    state.dialogFormVisible = true
    if (row) {
      state.isEdit = true
      state.title = '编辑素材'
      state.form = Object.assign(state.form, row)
    } else {
      state.isEdit = false
      state.title = '新增素材'
    }
  }