当前位置：首页 > news >正文

element-tree树结构-默认选中第一个节点高亮-根据id选中节点高亮

news 2025/8/5 7:22:13

前言

tree树结构是在开发中经常使用的组件，比如区域树，楼层树，组织架构树，等等包含节点关系
实际开发可能需要我们一进到页面选中树形结构第一个节点，并且调用数据，来达到用户体验
在用户选择之后，通过本地存储的方式把楼层id存起来，刷新之后获取楼层id，调用数据
或者为了用体验我们需要在选中同时高亮，在状态保持之后，把绑定楼层id节点高亮提示用户
万变不离其宗，基于文档介绍和HTML结构代码。我们可以通过2种办法实现

第一种-利用默认点击选中会增加类名

当我们打开浏览器检查会发现，当树节点点击之后。会在该节点添加一个类名
当我们配置好树形结构唯一值，默认选中数组，ref之后我们可以通过在获取楼层数据之后赋值，再通过侦听器来侦听，当察觉默认数组复制之后，就通过document找到这个类名，点击它，就会默认选中第一个
注意：使用this.$nextTick（）避免出现层级问题
缺点：不管传入什么值-只会选中第一个。应为是点击还会触发树结构自带的收缩

案例代码如下-可直接复制

<template><div class="box"><!-- default-checked-key-默认勾选的节点的 key 的数组 --><el-treeref="myTree"node-key="id":data="data":props="defaultProps":default-checked-keys="checkedkeys"></el-tree></div>
</template><script>
export default {data() {return {// 树形结构数据data: [{id: "0p150",name: "深圳QQQQ科技有限公司",children: [{id: 12070579,name: "一楼",parentId: 0,orderNum: null,},{id: 12075624,name: "二楼",parentId: 0,orderNum: null,},],},{id: "0p151",name: "wertw",children: [],},{id: "0p152",name: "qqqqq",children: [{id: 120725697,name: "一楼",parentId: 0,orderNum: null,},{id: 1207236195,name: "二楼",parentId: 0,orderNum: null,},],},{id: "0p154",name: "1231",children: [],},{id: "0p155",name: "123",children: [],},{id: "0p156",name: "123123",children: [],},],// 树形结构数据配置defaultProps: {id: "id",label: "name",children: "children",},//checkedkeys: [],};},// 侦听器watch: {checkedkeys: {// immediate: true,handler: function (newVal, oldVal) {if (newVal) {this.$nextTick(() => {// tree树结构点击会加上下面这个类名// 如果默认全部展开-那就会关闭document.querySelector(".el-tree-node__content").click();});}},},},mounted() {// 使用$nextTick 等页面加载完毕之后-在选中，防止加载顺序问题this.$nextTick(function () {// 通过ref找到树节点// 通过树结构设置node-key// 结果-选中第一个this.checkedkeys.push(this.data[0].id);// 结果固定id-选中第一个// this.checkedkeys.push('0p150');// 结果-子集选中第一个// this.checkedkeys.push(12070579);// 节点key 结果选中第一个// this.checkedkeys.push(["0p150", 12070579]);});
// 结论：不管传入什么，只会通过侦听器选中树结构第一个},
};
</script>
<style lang="scss" scoped>
// 点击选中颜色
</style>

第二种方法-通过高亮属性+tree提供api-推荐

当我们配置好树结构唯一值，高亮当前节点属性，ref之后，
我们在获取属性结构数据地方取第一个数据id，传入api，就可以高连当前节点
注意：使用this.$nextTick（）避免出现层级问题
优点：只需要树形结构唯一值id传入api就可以实现选中树形结构任意节点并且高亮-符合实际开发

案例代码如下-可直接复制

<template><div class="box"><!-- default-expand-all-展开全部 --><!-- highlight-current- 是否高亮当前选中节点 --><el-treeref="myTree"node-key="id":data="data":props="defaultProps"highlight-currentdefault-expand-all></el-tree></div>
</template><script>
export default {data() {return {// 树形结构数据data: [{id: "0p150",name: "深圳QQQQ科技有限公司",children: [{id: 12070579,name: "一楼",parentId: 0,orderNum: null,},{id: 12075624,name: "二楼",parentId: 0,orderNum: null,},],},{id: "0p151",name: "wertw",children: [],},{id: "0p152",name: "qqqqq",children: [{id: 120725697,name: "一楼",parentId: 0,orderNum: null,},{id: 1207236195,name: "二楼",parentId: 0,orderNum: null,},],},{id: "0p154",name: "1231",children: [],},{id: "0p155",name: "123",children: [],},{id: "0p156",name: "123123",children: [],},],// 树形结构数据配置defaultProps: {id: "id",label: "name",children: "children",},};},mounted() {// 使用$nextTick 等页面加载完毕之后-在选中，防止加载顺序问题this.$nextTick(function () {// 通过ref找到树节点// 通过树结构设置node-key，通过唯一id来高亮节点// setCurrentKey-通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性// 这行不会选中this.$refs.myTree.setCurrentKey(this.data[0].id);// 这行会生效this.$refs.myTree.setCurrentKey(this.data[0].children[0].id);});},
};
</script>
<style lang="scss" scoped>
// 设置高亮颜色
::v-deep.el-tree--highlight-current.el-tree-node.is-current> .el-tree-node__content {background-color: #baf !important;
}
</style>

总结：

经过这一趟流程下来相信你也对 element-tree树结构-默认选中第一个节点高亮-根据id选中节点高亮有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！