验证码: 看不清楚,换一张 查询 注册会员,免验证
  • {{ basic.site_slogan }}
  • 打开微信扫一扫,
    您还可以在这里找到我们哟

    关注我们

elementUI弹窗里的表单重置不生效如何解决

阅读:229 来源:乙速云 作者:代码code

elementUI弹窗里的表单重置不生效如何解决

给弹窗添加关闭时的事件:


method:{
    handleClose(){
        this.$refs.dialogForm.resetFields();
	this.dialogVisible = false;
    }
}
//注:表单重置一定要添加prop属性和ref属性。prop属性绑定输入框绑定的值,ref不能和其他表单重复

本以为这么做就已经好了,等到自己测试的时候发现点击修改后再点击新增,重置按钮好像没有生效,但是又好像生效了,就再往上查了下,才知道问题出现在哪。

先说this.$refs.dialogForm.resetFields();的作用:对整个表单进行重置,将所有字段值重置为初始值并移除校验结果

注意是所有字段值是重置为初始值,而不是清空值。

有什么区别呢,就比如我刚做的,因为表单是在弹窗里,弹窗默认是关闭状态,里面的数据没被初始化,新增和修改都可以打开弹窗,如果先点击的是新增,表单里的值初始化就是为空的,空就是初始值,但是如果先点击的是修改,表单里的初始值就是打开的回显的数据。

这就是为什么重置有时生效有时又不生效,而有时又好像部分生效的原因。

找到原因后就要找到解决办法,

//修改方法
amend(code) {
    this.dialogVisible = true;
    this.$nextTick(() => {
        // 注意看这里
        以下是回显方法
    })
}

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

分享到:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: hlamps#outlook.com (#换成@)。
相关文章
{{ v.title }}
{{ v.description||(cleanHtml(v.content)).substr(0,100)+'···' }}
你可能感兴趣
推荐阅读 更多>