element

您所在的位置：网站首页 › el-tree默认选中所有节点 › element

element

2023-04-17 02:48| 来源: 网络整理| 查看: 265

需求

选中父节点，子节点默认全选，取消一个子节点，那么这个子节点的所有父节点都取消掉选中状态，但是其兄弟节点不会受影响。

场景

场景一：点击‘你好’，所有子节点全选中

image.png image.png

场景二：点击‘再见’，取消‘再见’和‘你好’节点

image.png image.png

场景三：点击‘3’，最下层节点‘4’也会被选中。取消最下层节点‘4’，节点‘3’也会被取消

image.png image.png 代码

以下为完整代码：

使用 scoped slot

{{ node.label }} export default { props: { treeList: { type: Array, default() { return [] } } }, name: 'treeTest', components: {}, data() { return { leftProps: { label: 'name' }, isClickSelected: false } }, methods: { checkChange(obj, isChecked, isChildChecked) { // 取消，子节点只要有一个被取消父节点就被取消 if (!isChecked) { this.$refs.tree.setChecked(obj.p_id, false) } }, clickDeal(currentObj, treeStatus) { // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。 let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中 this.isClickSelected = selected // 选中 if (selected !== -1) { // 子节点只要被选中父节点就被选中 this.selectedChildren(currentObj) // 统一处理子节点为相同的勾选状态 this.uniteChildSame(currentObj, true) } else { // 未选中处理子节点全部未选中 if (currentObj.children && currentObj.children.length !== 0) { this.uniteChildSame(currentObj, false) } } }, // 统一处理子节点为相同的勾选状态 uniteChildSame(treeList, isSelected) { this.$refs.tree.setChecked(treeList.id, isSelected) let childLen = treeList.children ? treeList.children.length : 0 if (childLen) { for (let i = 0; i < childLen; i++) { this.uniteChildSame(treeList.children[i], isSelected) } } }, // 统一处理子节点为选中 selectedChildren(currentObj) { let currentNode = this.$refs.tree.getNode(currentObj) currentNode.childNodes.map(item => { if (item.key !== undefined) { this.$refs.tree.setChecked(item, true) this.selectedChildren(item) } }) } } } 数据结构

这是后端返回的数据的结构：

image.png

参考文档（需求稍有不同）

【本文地址】

element

element

今日新闻

推荐新闻