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

贵州企业展示型网站建设南京做机床的公司网站

news 2025/9/18 9:27:59

贵州企业展示型网站建设,南京做机床的公司网站,苏州住房城乡建设部网站,江西seo网站排名优化前言 tree树结构是在开发中经常使用的组件，比如区域树，楼层树，组织架构树，等等包含节点关系实际开发可能需要我们一进到页面选中树形结构第一个节点，并且调用数据，来达到用户体验在用户选择之后&#x…

前言

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选中节点高亮有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！