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

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 line
        this.calculateCheckedNodePaths(); // add this line
        this.syncActivePath(); // add this line
      }
    }

packages/cascader-panel/src/cascader-panel.vue , line at 147.

value() {
      this.clearCheckedNodes(); // add this line
      this.syncCheckedValue(); 
      this.checkStrictly && this.calculateCheckedNodePaths();
},

附上修改源码的方式

提供两个我使用的方法：

1. 修改ElementUI源码总结

2. 如果觉得上面的方法麻烦，可以直接在你的项目文件夹找到 node_modules/element-ui/lib/element-ui.common.js ，同样找到上述代码所在位置进行修改即可