ElementUI el-tree 获取节点点击选中状态与半选处理
作者:桌面漫游时间:2026-10-31 08:54:17浏览:405
本文介绍如何在 ElementUI 的 el-tree 组件中获取每个节点的点击选中状态。通过绑定 @check 事件和 ref 属性,结合 getCheckedNodes 方法判断节点是否被选中。针对 check-strictly 为 false 时出现的半选回显问题,探讨设置为 true 后的父子关联行为,并提供实现父子节点同步选中的代码逻辑。
在 ElementUI 框架中使用 el-tree 组件时,开发者常需获取每个节点点击后的选中状态。
若需实时获取 el-tree 中各个节点的点击状态,可采用特定方法,其中判断当前节点是否被选中的变量 isCheck 为布尔类型。
<el-tree
:data="organizationData"
:props="defaultProps"
:check-strictly="isAssociate"
node-key="organizationId"
:expand-on-click-node="false"
@check="getCurrentNode"
ref="tree"
>
</el-tree>1.绑定@check事件,我这里是getCurrentNode,函数名自己随便写 2.绑定ref
getCurrentNode(nodeObj, nodeState) {
//判断当前状态是选中还是取消选中
const isCheck = this.$refs.tree.getCheckedNodes().indexOf(nodeObj) > -1
console.log(isCheck)
}相关辅助说明。
关于 element-ui 中 el-tree 获取当前选中数据的方法,包括处理半选中的父节点情况。
- 当未给 el-tree 组件设置 check-strictly 属性时,其默认值为 false。此时若进行数据回显,可能会出现部分未手动选中的节点也被勾选的情况,需寻找解决方法。
- 若将 check-strictly 设置为 true,父子节点之间不再互相关联。这虽然避免了半选状态的出现,但逐个点击节点的用户体验较差,需优化操作流程。
- 为了简化用户操作,需实现以下逻辑:
- 当用户点击复选框勾选父节点时,其所有子节点应统一跟随选中,保持选中状态。
- 当用户点击复选框取消勾选父节点时,其所有子节点应统一跟随取消,保持未选中状态。
- el-tree 组件的相关标签属性说明。
node-key:每个树节点用来作为唯一标识的属性,整棵树应该是唯一的。标识节点唯一的键值名称。
default-checked-keys:对应el-tree多选树组件初始化时默认选中ID
check-strictly:是否严格的遵循父子不互相关联的做法,默认为false
check:当复选框被点击的时候触发的方法methods:{
<el-tree
ref="tree"
@check="check" //选中或取消选中都会执行该方法
:check-strictly="true" //这里需要设置为true,不设置会回显未选中的节点
:data="datalist" //数据源 拿接口数据赋值就可
show-checkbox
node-key="id"
:default-checked-keys="midPwList" //这里需要后台返回id集合数组 ,给它赋值即可
:props="{children: 'children',label: 'menuName',value:'id',disabled:disabledFn}">
<template #default="{node,data}">
<span class="custom-tree-node" >
<span>{{ node.label }}</span>
<span>
<el-tag closable size="mini" v-for="(item,index) in data.btnBean" @close="cancel(item.id)" :key="index">{{item.btnname}}</el-tag>
</span>
</span>
</template>
</el-tree>
<el-button type="text" size="medium" @click="quanxian(scope.row)">权限</el-button>
//调用check事件/下面三个方法都调用就可以实现,点击勾选父节点会跟随选中子节点/取消勾选父节点会跟随全部取消选中
check(currentObj, treeStatus) {
// 用于:父子节点严格互不关联时,父节点勾选变化时通知子节点同步变化,实现单向关联。
let selected = treeStatus.checkedKeys.indexOf(currentObj.id)
//不等于-1当前是选中状态
if (selected !== -1) {
this.selectedParent(currentObj)
//统一处理子节点为相同的勾选状态
this.uniteChildSame(currentObj, true)
}else {
//等于 -1 是取消选中状态
this.uniteChildSame(currentObj, false) //
}
},
uniteChildSame(treeList, isSelected) {
console.log(isSelected);
this.$refs.tree.setChecked(treeList.id, isSelected)
if (treeList.children) {
for (let i = 0; i < treeList.children.length; i++) {
this.uniteChildSame(treeList.children[i], isSelected)
}
}
},
selectedParent(currentObj) {
let currentNode = this.$refs.tree.getNode(currentObj)
console.log(currentNode);
if (currentNode.parent.key !== undefined) {
this.$refs.tree.setChecked(currentNode.parent, true)
this.selectedParent(currentNode.parent)
}
},
//回显勾选保存的数据
quanxian(row){
this.$nextTick(()=>{
this.midPwList = JSON.parse(JSON.stringify(row.listRole));
})
}
}至此,关于 ElementUI 中 el-tree 获取每个节点点击选中状态的讲解结束。如需了解更多 ElementUI el-tree 获取选中状态的内容,请搜索本站过往文章或继续浏览后续相关文章,感谢支持。
作者最新文章
Mock.js 拦截失效或数据格式错误的常见原因及排查
2026-11-05 10:11:59
Java和JavaScript名字像但没关系:辨析Java、JavaWeb与JS
2026-11-04 09:30:54
CodePen、JSFiddle与RunJS对比:哪款JS在线运行工具更适合你?
2026-11-03 16:46:57
JS 统计图渲染空白或报错怎么排查?常见问题解决指南
2026-11-03 09:49:40
flv.js 常见报错 MediaError 与解码失败排查指南
2026-11-02 10:29:29
