elementUI级联选择器（Cascader）回显问题和clearCheckedNodes无效的解决方法
Cascader第二次绑定值时，下拉框里选项高亮样式仍显示上一次绑定值时的状态 我在使用el-cascader-panel时发现的，官方文档中说明有clearCheckedNodes该方法可清空选中节点，实际使用中没有效果
文章图片
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 = https://www.it610.com/article/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();
},
附上修改源码的方式 【elementUI级联选择器（Cascader）回显问题和clearCheckedNodes无效的解决方法】提供两个我使用的方法：
- 修改ElementUI源码总结
- 如果觉得上面的方法麻烦，可以直接在你的项目文件夹找到
node_modules/element-ui/lib/element-ui.common.js，同样找到上述代码所在位置进行修改即可
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- javascript|javascript 性能测试笔记
- HTML5新增选择器属性方法
- CSS笔记
- SwiftUI|SwiftUI iOS 组件之双值区间取值选择器RangeSlider支持颜色（教程含源码）
- JQuery总结（选择器归纳、DOM遍历和事件处理、DOM完全操作和动画）
- 给新手同学总结的js|给新手同学总结的js css jquery选择器
- element中popover弹框中有选择器，点击后popover消失的解决办法
- Vue引入elementui