900字范文 > elementUI级联选择器（Cascader）回显问题和clearCheckedNodes无效的解决方法

elementUI级联选择器（Cascader）回显问题和clearCheckedNodes无效的解决方法

时间：2021-09-16 19:43:14

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();},