当前位置：首页 > news >正文

vue3 el-dialog新增弹窗，不希望一进去就校验名称没有填写

news 来源：原创 2025/4/29 15:45:14

就是在进入弹窗时、点击关闭/取消按钮时等情况清空该表单校验，在失去焦点或者点击确定/提交按钮的时候再去校验。这里默认已经写好了在失去焦点或者点击确定/提交按钮的时候的校验逻辑。

解决步骤：

一、定义清空表单校验方法

    // 清空表单校验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 = '';}});