[elementui]form表单先编辑后新建form自动触发校验

element form表单先编辑后新建form自动触发校验

problem

版本：element plus
操作步骤：

• 编辑表单内容，没做调整，取消
• 再次新建表单，弹窗打开
• 例如表单内容包含场景名称 sceneName 字段
  实际结果：
• 再次新建表单，会提示字段名为空的校验
  期望结果：
• 再次新建表单，不要校验表单，不要提示字段名为空的校验

reason

• 打开编辑弹窗后 formData.sceneName=‘任务系统’
• 编辑弹窗关闭后，调用 state.formRef.resetFields() 期望将formData内容情况 formData.sceneName=undefined
• 实际这个字段内容没清空，依然是 formData.sceneName=‘任务系统’
• 然后再次打开新建弹窗，初始化 formData.sceneName=undefined
• form发现 sceneName之前是’任务系统’，现在是 undefined，发生了changed，就触发了校验规则
• 总结：问题出在 element resetfields 无效

solution

• 在 form mounted之前，如果给form表单赋值了，那么后面调用resetFields()都是无效的
• 解决办法1(网上): 先设置 this.visible = true; 再在nextTick内设置formData的值 --我的依然无效
• 解决办法2：打开弹窗后，清空校验信息
• 解决办法3：手动设置formData为初始值

function openDialog({ formType, row }: DialogFormType<SceneForm>) {
  state.formData = (row || {}) as SceneForm;
  state.title = dialogTitle[formType];
  state.formType = formType;
  getDataTree().then(({ data }) => {
    state.list = data;
    state.visible = true;
    // 解决办法2 
    setTimeout(() => {
      state.formRef && state.formRef.clearValidate && state.formRef.clearValidate();
    });
  });
}

function closeDialog() {
    // state.formRef.resetFields(); // 无效
  state.formRef.clearValidate();
  state.visible = false;
}

function openDialog({ formType, row }: DialogFormType<SceneForm>) {
  state.formData = (row || {}) as SceneForm;
  state.title = dialogTitle[formType];
  state.formType = formType;
  getDataTree().then(({ data }) => {
    state.list = data;
    state.visible = true;
  });
}

function closeDialog() {
    // state.formRef.resetFields(); // 无效
  // 解决办法3 
  state.formData = {} as SceneForm;
  state.formRef.clearValidate();
  state.visible = false;
}