修复el-cascader插件 选中值和初始值相同时不能触发change事件

el-cascader使用 :value 赋予了初始值,切换选择其他值 可以正常触发@change绑定的事件方法,但当再次选择初始值时,并没有触发change事件方法。

修改cascader插件源码的checkedValue方法可以解决这个问题
在这里插入图片描述

定位源码位置方法
不同源码版本可能位置不同,上图作为参考,定位方法可以使用下面两种

方法一.使用浏览器debugger定位。在自定义的change事件处理方法中,打入debugger标签。当触发后,使用下图中 调试键点击大约5次后会进入cascader的checkedValue方法
在这里插入图片描述

方法二.在插件源码中搜索关键字符串定位到cascader位置 ‘packages/cascader-panel/src/cascader-panel.vue
在这里插入图片描述
找到后下拉到第一个checkValue方法

checkedValue方法修改后如下:

 checkedValue: function (e) {
                    var t = this.value, i = this.dropDownVisible, n = this.config, r = n.checkStrictly, s = n.multiple;
                    //注释掉的原处理逻辑
                    // I(e, t) && !b(t) || (this.computePresentContent(), s || r || !i || this.toggleDropDownVisible(!1), this.$emit("input", e), this.$emit("change", e), this.dispatch("ElFormItem", "el.form.change", [e]))
                    /*重写部分,修复cascader插件选择与初始值相同时没有触发 change事件的问题。 by MG*/
                    I(e, t) && !b(t) || (this.computePresentContent(), s || r || !i|| this.toggleDropDownVisible(!1), this.$emit("input", e),  this.dispatch("ElFormItem", "el.form.change", [e]))
                    this.$emit("change", e);//触发change事件
                    this.computePresentContent();//更新插件显示框文本内容
                    /*以上部分为重写*/
                }

修改后在选中初始值相同的选项时也能正常触发change方法。正式使用前建议把插件相关业务功能重新测试一遍,以免出现新问题。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值