<el-dialog v-model="dialogFormVisible" :before-close="checkInfo">
<el-form ref="userForm" :model="infoData.data" :rules="rules">
<el-form-item label="姓名" label-width="140px" prop="name" name="name">
<el-input type="number" v-model="infoData.data.phone" :prefix-icon="Phone"
placeholder="请输入手机号" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="confirm(userForm)">
确定
</el-button>
</span>
</template>
</el-dialog>
:before-close方法是在关闭前的回调,就是需要在关闭该对话框之前的操作。可能在关闭对话框之前,触发了form表单的校验,而关闭对话框时需要清除校验,则只需要在绑定的方法中用到clearValidate()即可。
userForm.value.clearValidate()
注:但我在用的过程中发现一个问题,我的手机号(也就是对应的phone),当校验规则为blur时,clearValidate()方法是生效的,而当校验规则为change时,clearValidate()方法就不生效,则就需要把clearValidate()方法替换为resetFields()方法,则就会生效。
userForm.value.resetFields()