Cascader第二次绑定值时,下拉框里选项高亮样式仍显示上一次绑定值时的状态
我在使用el-cascader-panel时发现的,官方文档中说明有clearCheckedNodes该方法可清空选中节点,实际使用中没有效果
<el-cascader-panel v-model="cateList" :options="options" :props="props" ref="cascader"></el-cascader-panel>
this.$refs.cascader.clearCheckedNodes()//调用方法无效
这个问题百度过没有人问,在el-cascader和el-cascader-panel中都有出现,终于在element的git issus中找到了解决方法,现在搬运过来
git 原issus地址
问题复现
第一次进入编辑页面的回显正常的情况
接着当我打开新增页面的时候,就会出现高亮样式仍显示上一次绑定值时的状态
或者打开另一样商品的编辑 回显情况:
解决办法需要修改elementUI源码
将以下代码中// add this line
的代码行复制进源码的相应位置中
packages/cascader-panel/src/cascader-panel.vue , line at 377
.
clearCheckedNodes() {const {config, leafOnly } = this;const {multiple, emitPath } = config;if (multiple) {this.getCheckedNodes(leafOnly).filter(node => !node.isDisabled).forEach(node => node.doCheck(false));this.calculateMultiCheckedValue();} else {this.checkedValue = emitPath ? [] : null;this.activePath = []; // add this linethis.calculateCheckedNodePaths(); // add this linethis.syncActivePath(); // add this line}}
packages/cascader-panel/src/cascader-panel.vue , line at 147
.
value() {this.clearCheckedNodes(); // add this linethis.syncCheckedValue(); this.checkStrictly && this.calculateCheckedNodePaths();},
附上修改源码的方式
提供两个我使用的方法:
修改ElementUI源码总结
如果觉得上面的方法麻烦,可以直接在你的项目文件夹找到node_modules/element-ui/lib/element-mon.js
,同样找到上述代码所在位置进行修改即可