前言
-
tree树结构是在开发中经常使用的组件，比如区域树，楼层树，组织架构树，等等包含节点关系
-
实际开发可能需要我们一进到页面选中树形结构第一个节点，并且调用数据，来达到用户体验
-
在用户选择之后，通过本地存储的方式把楼层id存起来，刷新之后获取楼层id，调用数据
-
或者为了用体验我们需要在选中同时高亮，在状态保持之后，把绑定楼层id节点高亮提示用户
-
万变不离其宗，基于文档介绍和HTML结构代码。我们可以通过2种办法实现
第一种-利用默认点击选中会增加类名
-
当我们打开浏览器检查会发现，当树节点点击之后。会在该节点添加一个类名
-
当我们配置好树形结构唯一值，默认选中数组，ref之后我们可以通过在获取楼层数据之后赋值，再通过侦听器来侦听，当察觉默认数组复制之后，就通过document找到这个类名，点击它，就会默认选中第一个
-
注意：使用this.$nextTick（）避免出现层级问题
-
缺点：不管传入什么值-只会选中第一个。应为是点击还会触发树结构自带的收缩
案例代码如下-可直接复制
<template>
<div class="box">
<!-- default-checked-key-默认勾选的节点的 key 的数组 -->
<el-tree
ref="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-tree
ref="myTree"
node-key="id"
:data="data"
:props="defaultProps"
highlight-current
default-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选中节点高亮 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！
什么不足的地方请大家指出谢谢 -- 風过无痕
