el-cascader懒加载勾选父节点,点击展开子节点时父节点的勾选会自动取消
时间: 2024-09-28 07:08:45 浏览: 49
ElementUI中el-tree节点的操作的实现
在Element UI的`ElCascader`组件中,当启用懒加载(lazy load)功能时,通常默认设置是单选模式,即用户只能选择一个节点。如果你想要实现这样的效果:当用户点击展开某个父节点的子节点时,如果该父节点已经被勾选,它会被自动取消勾选,你可以通过监听`expand-change`事件并处理状态来达成。
首先,你需要在`ElCascader`组件上绑定这个事件处理器,并检查当前被展开的节点是否是已勾选的父节点:
```javascript
<el-cascader
:options="options"
lazy
@expand-change="handleExpandChange"
/>
```
然后,在`handleExpandChange`方法里做如下操作:
```javascript
methods: {
handleExpandChange(node) {
if (node && node.parent) { // 检查是否是父节点
const parentPath = this.getPathToRoot(node.parent); // 获取到父节点的完整路径
const selectedPaths = this.getSelectedPaths(); // 获取当前已选路径
if (selectedPaths.includes(parentPath)) { // 如果父节点在已选路径列表中
const index = selectedPaths.indexOf(parentPath);
this.$refs.cascader.setCheckedPaths(selectedPaths.filter(path => path !== parentPath)); // 取消勾选该父节点
}
}
},
// 辅助方法,获取从根节点到给定节点的完整路径
getPathToRoot(node) {
return [...this.options.path].slice(0, -node.level).reverse().join('/');
},
// 辅助方法,获取所有已勾选的路径
getSelectedPaths() {
return this.$refs.cascader.getValue().map(path => path.join('/'));
}
}
```
这样,当用户点击子节点展开时,如果其父节点已被选中,则会自动取消选择。
阅读全文