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;
}