ElemeFE / ElemeFE/element

[Bug Report] el-tree设置节点数据的disabled,节点勾选效果不一致

Open
#23,107 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Vue
Stars
54k
Forks
14.4k
PR merge metrics
No merged PRs in 30d

Description

### Element UI version
2.15.14

### OS/Browsers version
edge

### Vue version
2.7.16

### Reproduction Link
https://codepen.io/hr837/pen/XJmwjQY

### Steps to reproduce
* 使用官方文档禁用状态的例子,设置节点二级2-2 数据disabled为false,再创建子节点 3-2-2-1 disabled 并且为false。

Image

* 勾选2-2节点,子级禁用节点的复选框不会被勾选。

Image

* 勾选叶子节点 3-2-2-1,但是父级已经被禁用的复选框被勾选了。

Image

因此出现了勾选结果不一致的结果,希望进行修复。

### What is Expected?
当设置的节点包含disabled的时候,不管从父级选择还是从叶子节点选择都不能勾选禁用的复选框。

### What is actually happening?
当设置的节点包含disabled的时候,如果从父级勾选渲染结果正确,如果从叶子节点勾选则会出现禁用的复选框被勾选。
————————————————
### 目前解决方法:
* 设置tree数据后,`nextTick`设置树勾选错的节点
``` javascript
// fix element-ui@2.15.14 如果节点设置禁用,若下级被勾选,本级也会被勾选。
// this.treeRef = this.$refs.tree
this.treeRef.getCheckedNodes().forEach(it => {
if (it.disabled) {
this.treeRef.setChecked(it, false)
}
})
```

* tree的 `check`事件中处理勾选错误的节点
```javascript
// 节点勾选设置
onNodeCheck(nodeData, { checkedNodes }) {
checkedNodes.forEach(it => {
if (it.disabled) {
// fix element-ui@2.15.14 如果节点设置禁用,若下级被勾选,上级会被勾选。
this.treeRef.setChecked(it, false)
}
})
}
}
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.