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>

具体效果如下:

以上代码供大家参考。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/485725.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Github Action Auto build docker Auto deploy

简介 整个流程比较清晰&#xff0c;实现的是基于Github 定向的往ECS做发布 探索 自动化打包发布一般流程&#xff1a; 本地环境打镜像 CI/CD 环境打镜像 以上的流程使用于比较大的项目&#xff0c;受限于环境&#xff0c;打算对上面流程做简化&#xff0c;使用github acti…

SpringBoot3+Vue3项目的阿里云部署--将后端以及前端项目打包

一、后端&#xff1a;在服务器上制作成镜像 1.准备Dockerfile文件 # 基础镜像 FROM openjdk:17-jdk-alpine # 作者 MAINTAINER lixuan # 工作目录 WORKDIR /usr/local/lixuan # 同步docker内部的时间 RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ…

Path MTU(路径最大传输单元)

目录 前言&#xff1a; IPV6不支持中间设备分片原因&#xff1a; IPV6报文分片使用的扩展报头&#xff08;44&#xff09;所包含的参数 IPv6报文分片过程 源节点分片数据包 前言&#xff1a; 在IPv4网络中&#xff0c;报文如果过大&#xff0c;则需要分片进行发送&#xf…

网络核心知识点 - 网络通信技术 XHR(XMLHttpRequest) 和 Fetch

一、关于 AJAX&#xff08;一种思想和方法&#xff09; 浏览器本身就具备网络通信的能力&#xff0c;但在早期&#xff0c;浏览器并没有把这个能力开放给JS。最早是微软在IE浏览器中把这一能力向JS开放&#xff0c;让JS可以在代码中实现发送请求&#xff0c;并不会刷新页面。Aj…

MS5910PA——10到16bit、内置参考振荡器 R/D转换器,替代AD2S1210

产品简述 MS5910PA 是一款可配置 10bit 到 16bit 分辨率的旋 变数字转换器。片上集成正弦波激励电路&#xff0c;正弦和余弦 允许输入峰峰值幅度为 2.3V 到 4.0V &#xff0c;频率范围为 2kHz 至 20kHz 。 转换器可并行或串行输出角度和速度对应的 数字量。 MS…

计算机软件安全

一、软件安全涉及的范围 1.1软件本身的安全保密 软件的本质与特征&#xff1a; 可移植性 寄生性 再生性 可激发性 攻击性 破坏性 …… 知识产权与软件盗版 软件商品交易形式不透明&#xff0c;方式多样&#xff0c;传统商标标识方法不适用&#xff1b; 盗版方法简捷…

IntelliJ IDEA集成git配置账号密码

1 背景说明 刚使用IDEA&#xff0c;本地也安装Git&#xff0c;在提交和拉取代码的时候&#xff0c;总提示登录框&#xff0c;而且登录框还不能输入账号密码&#xff0c;只能输入登录Token。如下&#xff1a; 从而无法正常使用IDEA的Git功能&#xff0c;很苦恼。 2 解决方法 …

C语言数据结构易错知识点(5)(插入排序、选择排序)

插入排序&#xff1a;直接插入排序、希尔排序 选择排序&#xff1a;直接选择排序、堆排序 上述排序都是需要掌握的&#xff0c;但原理不会讲解&#xff0c;网上有很多详尽地解释&#xff0c;本文章主要分享一下代码实现上应当注意的事项 1.直接插入排序&#xff1a; 代码实…

FastWiki(增强AI对话功能)企业级智能客服功能介绍

知识库对话功能 什么是知识库对话&#xff1f; 我们需要找到AI的知识能力是有限的他们的知识都截止于他们训练数据的时间&#xff0c;你提问他们更新的数据的时候他们就会出现乱回复。而知识库则是利用Prompt给于AI更多的知识从而让他回复更准确&#xff0c; 以下就是知识库的…

如何通过idea搭建一个SpringBoot的Web项目(最基础版)

通过idea搭建一个SpringBoot的Web项目 文章目录 通过idea搭建一个SpringBoot的Web项目一、打开idea&#xff0c;找到 create new project二、创建方式三、配置项目依赖四、新建项目模块五、总结 一、打开idea&#xff0c;找到 create new project 方式1 方式2 二、创建方式 新…

更换 Jenkins 插件下载源(解决 Jenkins 插件安装失败)【图文详细教程】

Jenkins 插件安装失败的情况 这里提一下&#xff0c;Jenkins 插件安装失败&#xff0c;不一定是下载源的问题&#xff0c;还有可能你下载的 Jenkins 的版本与插件的版本不匹配&#xff0c;Jenkins 的版本较低&#xff0c;而安装的插件是为新的 Jenkins 版本准备的&#xff0c;此…

领域、系统和组织-《实现领域驱动设计》中译本评点-第2章(4)

相关链接 DDD领域驱动设计批评文集>> 汪峰哭晕在厕所-《实现领域驱动设计》中译本评点-第2章&#xff08;1&#xff09; 可不是乱打的-《实现领域驱动设计》中译本评点-第2章&#xff08;2&#xff09; “领域”的错误定义-《实现领域驱动设计》中译本评点-第2章&…

牛客题霸-SQL篇(刷题记录三)

本文基于前段时间学习总结的 MySQL 相关的查询语法&#xff0c;在牛客网找了相应的 MySQL 题目进行练习&#xff0c;以便加强对于 MySQL 查询语法的理解和应用。 由于涉及到的数据库表较多&#xff0c;因此本文不再展示&#xff0c;只提供 MySQL 代码与示例输出。 以下内容是…

笔试总结01

1、spring原理 1、spring原理 spring的最大作用ioc/di,将类与类的依赖关系写在配置文件中&#xff0c;程序在运行时根据配置文件动态加载依赖的类&#xff0c;降低的类与类之间的藕合度。它的原理是在applicationContext.xml加入bean标记,在bean标记中通过class属性说明具体类…

Mamba 基础讲解【SSM,LSSL,S4,S5,Mamba】

文章目录 Mamba的提出动机TransformerRNN Mama的提出背景状态空间模型 (The State Space Model, SSM)线性状态空间层 (Linear State-Space Layer, LSSL)结构化序列空间模型 &#xff08;Structured State Spaces for Sequences, S4&#xff09; Mamba的介绍Mamba的特性一&#…

天软高频因字库——委托订单因子及资金流向因子发布

天软始终致力于构建完善而丰富的因子库服务体系&#xff0c;陆续推出了股票因子、基金因子、指数因子等众多因子数据及评价数据。 本月天软推出高频委托订单&资金流向相关因子&#xff0c;继续补充和完善天软高频特色因子库&#xff0c;至此该因子库已包含36个因子表单&…

基于SpringBoot+Vue共享客栈管理系统(源码+部署说明+演示视频+源码介绍+lw)

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。&#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精通…

Pycharm配置conda

1.下载conda Free Download | Anaconda . 2.配置环境 1.conda自带base环境 2.创建环境 3. Pycharm创建项目&#xff0c;选择环境 3.Pycharm中新建conda环境

win11 安装SIBR 3dgs

1.安装显卡驱动 下载地址&#xff1a; 官方驱动 | NVIDIA下载适用于 GeForce、TITAN、NVIDIA RTX、数据中心、GRID 等 NVIDIA 产品的新驱动。https://www.nvidia.cn/Download/index.aspx?langcn 2.安装cuda 下载地址&#xff1a;如果无法打开&#xff0c;切换.com为.cn&am…

AD20如何整体修改元器件标号?

1 2这里可以设置元器件标号方向 3更新 4点击前两个选项&#xff08;生成&#xff0c;执行&#xff09;即可