在 el-dialog 中使用 el-form 时,弹框关闭无法清除校验状态和校验提示信息

在 closed 回调中先将 form 对象重置为初始值(跟 data 中的值相同),然后在 $nextTick 中使用 clearValidate 清除校验状态即可。这样做的好处(跟其他解决方式相比)是没有任何使用体验上的损失。

<el-dialog :visible.sync="dialogVisible" @closed="dialogClosed" >
    <el-form :model="dialogForm" :rules="rules" ref="dialogForm">
        //...
    </el-form>
</el-dialog>
data () {
    return {
        dialogForm: {
            foo: 123,
            bar '',
        },
    }
},
methods: {
    showDialog () {
        this.dialogVisible = true;

        // 如果需要给弹框中的表单填充默认值,需要将一个新对象赋给它,
        // 而不是通过给原对象添加属性的方式,否则第二次打开弹框后还是会显示之前的校验信息
        this.dialogForm = {
            id: 1,
            name: '张三',
            age: '118',
        }
    },
    dialogClosed () {
        this.dialogForm = {
            foo: 123,
            bar '',
        };

        this.$nextTick(() => {
            this.$refs.dialogForm.clearValidate()
        })
    },
},

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值