当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方法。正式使用前建议把插件相关业务功能重新测试一遍,以免出现新问题。