Element Plus表单重置不生效

场景

后台管理系统中常见的添加和编辑，例如角色管理模块，其包含了添加角色以及编辑角色的功能，代码实现上我们通常会用同一个弹窗实现添加和编辑.

问题

当你重置表单时可能会遇到失效的问题，原因是因为在vue3的setup语法糖，setup模拟的是onBeforeCreate以及onCreated生命周期,此时你给表单赋值时，表单组件还未真正的渲染在页面上，此时的数据是重置不掉的。

解决方案

此时可通过nextTick函数实现，表单组件加载成功后去赋值

const editDept = async (index: number, row: tableItem) => {
  console.log(index, row);
  await nextTick(() => {
    basicStore.setShowShadow(true);//打开编辑弹窗
  });
  form.name = row.deptName;
  form.encoding = row.deptCode;
  form.status = Number(row.isEnable);
  form.memo1 = row.memo1;
};