vue-org-tree搜索到对应项高亮展开

效果图:

代码:

<template>
  <div class="AllTree">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.user" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <div ref="treeContainer" class="tree-container">
      <org-tree :data="data" :horizontal="true" name="test" :label-class-name="labelClassName" collapsable
        @on-expand="onExpand" @on-node-click="clickTree" ref="orgTree" :label-width="150"
        :line-style="{ stroke: '#ccc', strokeWidth: 2 }">
      </org-tree>
    </div>
    <!-- 俱乐部信息弹窗 -->
    <el-drawer title="俱乐部信息" :visible.sync="drawer" :before-close="handleClose">
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>

 初始化定义数据:

import OrgTree from 'vue2-org-tree';
import 'vue2-org-tree/dist/style.css';

export default {
  components: {
    orgTree: OrgTree
  },
  data() {
    return {
      formInline: {
        user: ''
      },
      id: null,
      drawer: false,
      data:{},
      data1: {
        id: 0,
        label: "XX俱乐部",
        children: [
          {
            id: 2,
            label: "xx合伙人",
            children: [
              {
                id: 5,
                label: "研发-前端",
                children: [
                  {
                    id: 55,
                    label: "前端1",
                    children: [
                      {
                        id: 555,
                        label: "前端1111",
                      },
                      {
                        id: 556,
                        label: "前端2222",
                      },
                      {
                        id: 557,
                        label: "前端3333",
                        children: [{
                          id: 5557,
                          label: "前端11111",
                        },
                        {
                          id: 5558,
                          label: "前端22222",
                        },
                        {
                          id: 5559,
                          label: "前端33333",
                        },
                        {
                          id: 5560,
                          label: "前端44444",
                        },
                        {
                          id: 5561,
                          label: "前端55555",
                        }]
                      },
                      {
                        id: 558,
                        label: "前端3333",
                      }
                    ]
                  },
                  {
                    id: 56,
                    label: "前端2"
                  },
                  {
                    id: 57,
                    label: "前端3"
                  },
                  {
                    id: 58,
                    label: "前端4"
                  }
                ]
              },
              {
                id: 6,
                label: "研发-后端"
              },
              {
                id: 9,
                label: "UI设计"
              },
              {
                id: 10,
                label: "产品经理"
              }
            ]
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部",
                children: [
                  {
                    id: 78,
                    label: "销售一部组长",
                    children: [{
                      id: 788,
                      label: "销售一部A",
                    },
                    {
                      id: 789,
                      label: "销售一部B",
                    },
                    {
                      id: 790,
                      label: "销售一部C",
                    },
                    {
                      id: 791,
                      label: "销售一部D",
                    }]
                  }
                ]
              },
              {
                id: 8,
                label: "销售二部"
              }
            ]
          },
          {
            id: 4,
            label: "财务部"
          },
          {
            id: 9,
            label: "HR人事"
          }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      zoom: 1,
      BasicSwich: false,
      collapsable: true,
      labelClassName: "org-bg-white",
      clickTimeout: null
    };
  },

 搜索事件定义方法:

 created() {
    this.getTreeData();
  },
  methods: {
    //获取节点数据
    getTreeData(){
      this.data=this.data1
      this.expandChange();
    },
    renderContent(h, data) {
      return data.label;
    },
    // 树状结构折叠打开
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    collapse(list) {
      var _this = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    expandChange() {
      this.toggleExpand(this.data, true);
    },
    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          _this.$set(item, "expand", val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    },
    // 搜索事件
    handleSearch() {
      const isLabelFound = this.findLabel(this.data, this.formInline.user.trim());
      console.log('isLabelFound',isLabelFound)

    },
    findLabel(node, targetLabel) {
       // 清除先前设置的背景色
      this.clearHighlight();
      const searchInChildren = (node) => {
        if (node.id == 0) {
          node.expand = true          
        }
        //检查当前节点
        if (node.label === targetLabel) {
          this.id = node.id;
          node.expand = true;
          this.highlightLabel(targetLabel, "#46a6ff"); // 设置背景色为 pink
          return true;//找到目标节点
        }
        //递归搜索子节点
        if (node.children) {
          for (let child of node.children) {
            if (searchInChildren(child)) {
              child.expand = true
              return true;//如果在子节点找到目标节点,直接返回true
            }
          }
        }
        return false;//当前节点及其子节点都未找到目标节点
      }
      const found = searchInChildren(node)
      if (!found) {
        this.$message.warning('未找到该项')
      }
      return found ? this.id : false
    },
    highlightLabel(targetLabel, color) {
      // 异步更新,等待 DOM 渲染完成后再操作
      setTimeout(() => {
        let orgTreeList = document.getElementsByClassName('org-tree-node-label-inner');
        for (let i = 0; i < orgTreeList.length; i++) {
          if (orgTreeList[i].innerText === targetLabel) {
            orgTreeList[i].style.backgroundColor = color;
            break; // 找到第一个匹配的节点后即可退出循环
          }
        }
      }, 0);
    },

    clearHighlight() {
      let orgTreeList = document.getElementsByClassName('org-tree-node-label-inner');
      for (let i = 0; i < orgTreeList.length; i++) {
        orgTreeList[i].style.backgroundColor = ""; // 清除背景色
      }},
    //点击事件
    clickTree(e, data) {
      if (this.clickTimeout) {
        // 如果存在单击事件的计时器,则视为双击事件
        clearTimeout(this.clickTimeout);
        this.$router.push({
          path: "/dataVisualization/recommendedLinksDetail",
          query: {
            id: data.id,
          },
        });
      } else {
        // 否则,启动单击事件计时器
        this.clickTimeout = setTimeout(() => {
          this.drawer = true
          this.clickTimeout = null; // 清除计时器
        }, 500); // 200毫秒内判断是否双击
      }
      // const depth = this.getNodeDepth(data);
      // if (depth === 1) {
      //   // 第一层节点,显示弹窗或其他操作
      //   this.drawer = true
      // } else {
      //   // this.$router.push({
      //   //   path: "/dataVisualization/recommendedLinksDetail",
      //   //   query: {
      //   //     id: data.id,
      //   //   },
      //   // });
      //   console.log(111)
      // }

    },
    getNodeDepth(node, depth = 0) {
      // 递归计算节点的深度(层级)
      console.log(node)
      console.log(node.parent)
      if (node.parent) {
        return this.getNodeDepth(node.parent, depth + 1);
      }
      return depth;
    },
    handleClose() {
      this.drawer = false
    }
  }
}

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

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

相关文章

Git详细安装和使用教程

文章目录 准备工作-gitee注册认识及安装GitGit配置用户信息本地初始化Git仓库记录每次更新到仓库查看及切换历史版本Git忽略文件和查看文件状态Git分支-查看及切换Git分支-创建分支Git分支-合并及删除分支Git分支-命令补充Git分支-冲突需求: 准备工作-gitee注册 传送门: gite…

zabbix 与 grafana 对接

一.安装 grafana 1.初始化操作 初始化操作 systemctl disable --now firewalld setenforce 0 vim /etc/selinux/config SELINUXdisabled 2.上传数据包并安装 cd /opt grafana-enterprise-9.4.7-1.x86_64.rpm #上传软件包 yum localinstall -y grafana-enterprise-9.4.7-1…

Django QuerySet对象,exclude()方法

模型参考上一章内容&#xff1a; Django QuerySet对象&#xff0c;filter()方法-CSDN博客 exclude()方法&#xff0c;用于排除符合条件的数据。 1&#xff0c;添加视图函数 Test/app11/views.py from django.shortcuts import render from .models import Postdef index(re…

身边的故事(十四):阿文的故事:再买房

短短的一年多时间里&#xff0c;阿文仿佛从人生低谷完全走出来了。各种眼花缭乱的操作和处理事情方式让人觉得不可思议&#xff0c;是不是一个人大手大脚花钱惯了&#xff0c;让他重新回到艰苦朴素的日子是不是比死都难受呢&#xff1f;又或者像我这种靠勤勤恳恳的打工人是无法…

SpringMVC常见的注解

一、Spring MVC Spring Web MVC是基于ServletAPI构建的原始web 框架&#xff0c;一开始就包含在Spring 框架中&#xff0c;通常被称为“Spring MVC”。 1.MVC 是什么&#xff1f; MVC(Model、View、Controller&#xff09;是软件工程中的一种软件架构设计模型。它把软件系统分…

基于深度学习LightWeight的人体姿态之行为识别系统源码

一. LightWeight概述 light weight openpose是openpose的简化版本&#xff0c;使用了openpose的大体流程。 Light weight openpose和openpose的区别是&#xff1a; a 前者使用的是Mobilenet V1&#xff08;到conv5_5&#xff09;&#xff0c;后者使用的是Vgg19&#xff08;前10…

Flink SQL kafka连接器

版本说明 Flink和kafka的版本号有一定的匹配关系&#xff0c;操作成功的版本&#xff1a; Flink1.17.1kafka_2.12-3.3.1 添加kafka连接器依赖 将flink-sql-connector-kafka-1.17.1.jar上传到flink的lib目录下 下载flink-sql-connector-kafka连接器jar包 https://mvnreposi…

python实现接口自动化

代码实现自动化相关理论 代码编写脚本和工具实现脚本区别是啥? 代码&#xff1a; 优点&#xff1a;代码灵活方便缺点&#xff1a;学习成本高 工具&#xff1a; 优点&#xff1a;易上手缺点&#xff1a;灵活度低&#xff0c;有局限性。 总结&#xff1a; 功能脚本&#xff1a;工…

找不到x3daudio1_7.dll怎么修复?一招搞定x3daudio1_7.dll丢失问题

当你的电脑突然弹出提示&#xff0c;“找不到x3daudio1_7.dll”&#xff0c;这时候你就需要警惕了。这往往意味着你的电脑中的程序出现了问题&#xff0c;你可能会发现自己无法打开程序&#xff0c;或者即便打开了程序也无法正常使用。因此&#xff0c;接下来我们要一起学习一下…

07浅谈大语言模型可调节参数tempreture

浅谈temperature 什么是temperature&#xff1f; temperature是大预言模型生成文本时常用的两个重要参数。它的作用体现在控制模型输出的确定性和多样性&#xff1a; 控制确定性&#xff1a; temperature参数可以控制模型生成文本的确定性&#xff0c;大部分模型中temperatur…

1、Java入门(cmd使用)+ jdk的配置

文章目录 前言一、常见的CMD命令1 盘符+冒号:D:---- 切换到D盘根目录下(注意要英文冒号才行)2 查看目录下内容dir --- 查看当前目录下的所有内容(包括文件夹、各种文件、exe程序、隐藏文件等所有都会查看到)dir 目录名(或路径)3 cd 目录(或者路径)--- 进入到指定目录…

探索人工智能在电子商务平台与游戏发行商竞争中几种应用方式

过去 12 年来&#xff0c;电脑和视频游戏的发行策略发生了巨大变化。数字游戏的销量首次超过实体游戏的销量 在20132020 年的封锁进一步加速了这一趋势。例如&#xff0c;在意大利&#xff0c;封锁的第一周导致数字游戏下载量 暴涨174.9%. 展望未来&#xff0c;市场有望继续增…

【若依前后端分离】通过输入用户编号自动带出部门名称(部门树)

一、部门树 使用 <treeselect v-model"form.deptId" :options"deptOptions" :show-count"true" placeholder"请选择归属部门"/> <el-col :span"12"><el-form-item label"归属部门" prop"dept…

QT5.14.2与Mysql8.0.16配置笔记

1、前言 我的QT版本为 qt-opensource-windows-x86-5.14.2。这是QT官方能提供的自带安装包的最近版本&#xff0c;更新的版本需要自己编译源代码&#xff0c;可点击此链接进行下载&#xff1a;Index of /archive/qt/5.14/5.14.2&#xff0c;选择下载 qt-opensource-windows-x86…

【机器学习】基于线性回归的医疗费用预测模型

文章目录 一、线性回归定义和工作原理假设表示 二、导入库和数据集矩阵表示可视化 三、成本函数向量的内积 四、正态方程五、探索性数据分析描述性统计检查缺失值数据分布图相关性热图保险费用分布保险费用与性别和吸烟情况的关系保险费用与子女数量的关系保险费用与地区和性别…

Halcon 铣刀刀口破损缺陷检测

一 OTSU OTSU&#xff0c;是一种自适应阈值确定的方法,又叫大津法&#xff0c;简称OTSU&#xff0c;是一种基于全局的二值化算法,它是根据图像的灰度特性,将图像分为前景和背景两个部分。当取最佳阈值时&#xff0c;两部分之间的差别应该是最大的&#xff0c;在OTSU算法中所采…

张量分解(2)——张量运算(内积、外积、直积、范数)

&#x1f345; 写在前面 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;这里是hyk写算法了吗&#xff0c;一枚致力于学习算法和人工智能领域的小菜鸟。 &#x1f50e;个人主页&#xff1a;主页链接&#xff08;欢迎各位大佬光临指导&#xff09; ⭐️近…

Stream流真的很好,但答应我别用toMap()

你可能会想&#xff0c;toList 和 toSet 都这么便捷顺手了&#xff0c;当又怎么能少得了 toMap() 呢。 答应我&#xff0c;一定打消你的这个想法&#xff0c;否则这将成为你噩梦的开端。 让我们先准备一个用户实体类。 Data AllArgsConstructor public class User { priv…

【C#】函数方法、属性分文件编写

1.思想 分文件编写是面向对象编程的重要思想&#xff0c;没有实际项目作为支撑很难理解该思想的精髓&#xff0c;换言之&#xff0c;一两个函数代码量因为太少无法体现分文件编写减少大量重复代码的优势。 2.项目结构介绍 整项目的名称叫AutoMetadata&#xff0c;是一个基于W…

【第三版 系统集成项目管理工程师】第4章 信息系统架构

持续更新。。。。。。。。。。。。。。。 【第三版】系统集成项目管理工程师 考情分析4.1架构基础4.1.1指导思想&#xff08;非重点&#xff09; P1364.1.2设计原则&#xff08;非重点&#xff09; P1364.1.3建设目标&#xff08;非重点&#xff09; P1374.1.4总体框架 P138练习…