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

前言

• tree树结构是在开发中经常使用的组件，比如区域树，楼层树，组织架构树，等等包含节点关系

• 实际开发可能需要我们一进到页面选中树形结构第一个节点，并且调用数据，来达到用户体验

• 在用户选择之后，通过本地存储的方式把楼层id存起来，刷新之后获取楼层id，调用数据

• 或者为了用体验我们需要在选中同时高亮，在状态保持之后，把绑定楼层id节点高亮提示用户

• 万变不离其宗，基于文档介绍和HTML结构代码。我们可以通过2种办法实现

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

• 当我们打开浏览器检查会发现，当树节点点击之后。会在该节点添加一个类名

• 当我们配置好树形结构唯一值，默认选中数组，ref之后我们可以通过在获取楼层数据之后赋值，再通过侦听器来侦听，当察觉默认数组复制之后，就通过document找到这个类名，点击它，就会默认选中第一个

• 注意：使用this.$nextTick（）避免出现层级问题

• 缺点：不管传入什么值-只会选中第一个。应为是点击还会触发树结构自带的收缩

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

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

什么不足的地方请大家指出谢谢 -- 風过无痕