el-tree 使用按钮切换当前选中的节点(上一节点,下一节点)

<!-- 选择树上下切换 -->
<template>
    <div>
      <el-tree
        :data="treeData"
        :props="defaultProps"
        node-key = "id"
        ref="tree"
        @node-click="handleNodeClick"
      ></el-tree>
      <div>
        <el-button @click="goUp">Go Up</el-button>
        <el-button @click="goDown">Go Down</el-button>
      </div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        treeData: [
        {
            id: 1,
            label: '根节点1-ID1',
            children: [
            {
                id: 4,
                label: '子节点1-1-ID4',
                children: [
                {
                    id: 9,
                    label: '孙节点1-1-1-ID9'
                },
                {
                    id: 10,
                    label: '孙节点1-1-2-ID10'
                }
                ]
            },
            {
                id: 5,
                label: '子节点1-2-ID5'
            }
            ]
        },
        {
            id: 2,
            label: '根节点2-ID2',
            children: [
            {
                id: 6,
                label: '子节点2-1-ID6'
            },
            {
                id: 7,
                label: '子节点2-2-ID7',
                children: [
                {
                    id: 11,
                    label: '孙节点2-2-1-ID11'
                }
                ]
            }
            ]
        },
        {
            id: 3,
            label: '根节点3-ID3'
        }
        ],
        defaultProps: {
        children: 'children',
        label: 'label'
        },
        currentNode: null // 当前选中的节点
      };
    },
    methods: {
      handleNodeClick(data, node) {
        console.log("------节点被点击了------");
        this.currentNode = node;
      },
      goUp() {
        debugger
        let currentNode = this.currentNode;
        console.log("当前节点:"+  currentNode.data.id + "---" + currentNode.data.label)
        if (!currentNode) return;
        // 如果当前节点有兄弟节点,则选择上一个兄弟节点
        const prevSibling = this.findPrevSibling(currentNode);
        if (prevSibling) {
            this.currentNode = prevSibling;
            this.$refs.tree.setCurrentKey(this.currentNode.data.id);
            this.handleNodeClick(this.currentNode.data,this.currentNode);
            return;
        }
        // 如果当前节点没有兄弟节点,则向上走到父节点
        let parentNode = currentNode.parent;

        while (parentNode){
            if(parentNode){
                //存在父级节点,同时判断当前节点是不是父级节点的第一个儿子节点,如果是当前节点不变;
              if(parentNode.level != 0){
                //存在父节点则选中父节点
                this.currentNode = parentNode;
                this.$refs.tree.setCurrentKey(this.currentNode.data.id);
                this.handleNodeClick(this.currentNode.data,this.currentNode);
                return;
              }else {
                //已达到根节点,不需要改变当前节点
                return;
              }
            }else{
                //不存在父节点,继续向上走到父节点的父节点
                currentNode = parentNode;
                parentNode = currentNode.parent;
            }
        }
        // 如果到达根节点还没有找到兄弟节点,则重置当前节点为 null
        // this.currentNode = null;
        },
      goDown() {
        const node = this.currentNode;
        const firstSonNode = this.findFirstSonNode(node);
        if(firstSonNode){
          // console.log("------找到了第一个儿子节点------");
          //选中
          this.toCheckNode(firstSonNode);
        }else {
          //没有儿子找下一个兄弟
          const nextBrotherNode = this.findNextBrotherNode(node);
          // console.log("------找下一个兄弟节点------");
          if(node.level == 1 && !nextBrotherNode){
            console.log("------没找到下一个兄弟节点,现在不找了------");
            return;
          }
          if(nextBrotherNode){
            //找到的下一个兄弟节点
            this.toCheckNode(nextBrotherNode);
          }else{
            //找父亲的下一个兄弟
            const nextParentNode = this.findNextParentNode(node);
             if(nextParentNode){
               this.toCheckNode(nextParentNode);
             }
          }

        }

      },
      // 辅助方法:找到给定节点的上一个兄弟节点
      findPrevSibling(node) {
          const parentNode = node.parent;
          console.log(node.data.id + "---父节点:" + parentNode);
          if (!parentNode) return null;
          const index = node.parent.childNodes.indexOf(node);
          if (index > 0) {
              return node.parent.childNodes[index - 1];
          }
          return null;
      },
      // 辅助方法:找到给定节点的下一个兄弟节点
      findNextBrotherNode(node) {
          const parentNode = node.parent;
          if (!parentNode) return null;
          const index = node.parent.childNodes.indexOf(node);
          if (index < node.parent.childNodes.length - 1) {
              return node.parent.childNodes[index + 1];
          }
          return null;
      },
      // 辅助方法:找到给定节点的第一个子节点
      findFirstSonNode(node) {
          const childNodes = node.childNodes;
          if (!childNodes) return null;
          if(childNodes.length > 0){
            if(childNodes[0].childNodes.length > 0){
              return  this.findFirstSonNode(childNodes[0]);
            }
            return childNodes[0];
          }
          return null;
      },
      // 辅助方法:找到给定节点的下一个父亲节点
      findNextParentNode(node) {
        const parentNode = node.parent;
        // console.log("当前找下一个父亲节点:"+ parentNode.data.label);
        if (!parentNode) return null;
        if (!parentNode.parent) return null;
        const index = parentNode.parent.childNodes.indexOf(parentNode);
        if (index < parentNode.parent.childNodes.length - 1) {
          return parentNode.parent.childNodes[index + 1];
        }
        return  this.findNextParentNode(parentNode);
      },
      //辅助方法,选中节点
      toCheckNode(node){
        this.currentNode = node;
        this.$refs.tree.setCurrentKey(this.currentNode.data.id);
        this.handleNodeClick(this.currentNode.data,this.currentNode);
      }

    }
  };
  </script>

具体效果如下:

以上代码供大家参考。

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-28 15:52:05       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-28 15:52:05       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-28 15:52:05       87 阅读
  4. Python语言-面向对象

    2024-03-28 15:52:05       96 阅读

热门阅读

  1. 计算机网络(05)

    2024-03-28 15:52:05       45 阅读
  2. Qt6兼容Qt5遇到的问题总结

    2024-03-28 15:52:05       39 阅读
  3. python内置函数 V

    2024-03-28 15:52:05       43 阅读
  4. Python:语法糖

    2024-03-28 15:52:05       39 阅读
  5. 本地项目提交到远程服务器的git流程

    2024-03-28 15:52:05       44 阅读
  6. Day32 贪心算法 part02

    2024-03-28 15:52:05       46 阅读
  7. ip地址开发场景问题

    2024-03-28 15:52:05       45 阅读
  8. 安全点安全区的通俗理解

    2024-03-28 15:52:05       42 阅读
  9. Chrome安装Vue插件vue-devtools

    2024-03-28 15:52:05       48 阅读
  10. 学习Dive into Deep learning:2.2 数据预处理,pandas

    2024-03-28 15:52:05       40 阅读
  11. 【晴问算法】算法初步—散列—整数出现次数

    2024-03-28 15:52:05       40 阅读