element-plus vue3 dialog form 清空 重置 resetFields

添加、修改同一个弹框，清空form表单数据。

修改设置值的时候一定是打开窗口在 nextTick 中赋值

nextTick(() => {
//*********重点*******修改的时候再这里赋值********
}

然后在关闭弹框的时候清空表单

// 关闭弹窗
const closeDialog = () => {
  isShowDialog.value = false;
// form表单Ref清空表单中的值
  upsertAccountRef.value?.resetFields()
};

 还有最终要的一点是清空的form-item 要设置prop属性

这样也可以

  if (rowData) {
    title.value = "修改"
    state.drawerForm.id = rowData.id
    nextTick(() => {

      state.drawerForm = JSON.parse(JSON.stringify(rowData))

      state.drawerForm.skuList = []
    })
 }

dialogForm=JSON.parse(JSON.stringify(rowData))

注意：首先确认dialogForm是使用ref 还是reactive还是state

如果是ref可以直接dialogForm.value=

如果是reactive

1：把每个属性点出来赋值

2：Object.assign(dialogForm, rowData)

亲测可用

element-plus vue3 dialog form 清空 重置 resetFields