vue3 el-dialog新增弹窗,不希望一进去就校验名称没有填写
就是在进入弹窗时、点击关闭/取消按钮时等情况清空该表单校验,在失去焦点或者点击确定/提交按钮的时候再去校验。这里默认已经写好了在失去焦点或者点击确定/提交按钮的时候的校验逻辑。
解决步骤:
一、定义清空表单校验方法
// 清空表单校验const clearDialogValidate = () => {setTimeout(() => {proxy.$refs["dataSourceRuleForm"].clearValidate();}, 0)}
二、进入弹窗时清空一下表单校验
onMounted(() => {... ...// 进入弹窗时清空一下表单校验
++ clearDialogValidate();});
三、关闭弹窗时,清空一下表单校验
// 关闭弹窗时,清空一下表单校验const close = () => {emit("close");
++ clearDialogValidate(); // 清空表单校验
++ XXX.value.Name = ''; // 关闭弹窗时,清空一下填写的名称,避免再次进新增窗口回显};
四、 监听到进入新增/编辑弹窗时,也清空一下名称的表单校验
// 监听 OBJECT_ID 的变化 (也就是重复进入新增/编辑弹窗时,根据这个ID可以去监听到)
watch(() => props.OBJECT_ID,(newValue) => {
++ clearDialogValidate(); // 再次进入弹窗时,继续清空表单校验if (newValue) {operationType = ObjectOperationType.Modify;loading.value = true;getData();getObjectVersion();getPfsTablesData();} else {operationType = ObjectOperationType.Add;XXX.value.Name = '';}});