el-tree懒加载状态下实现搜索筛选(纯前端)

news2024/11/15 8:53:23

1.效果图 

(1)初始状态

 

(2)筛选后 

2.代码 

<template>
  <div>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText"
      @input="searchValue"
    >
    </el-input>

    <el-tree
      class="filter-tree"
      node-key="id"
      :lazy="!openAll"
      :load="loadNode"
      :data="dataTree"
      :props="defaultProps"
      :default-expand-all="openAll"
      ref="tree"
    >
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      openAll: false,
      filterText: '',
      dataTree: [
        {
          id: 1,
          label: 'xx公司',
          children: [
            {
              id: 3,
              label: '公关',
              children: [
                {
                  id: 6,
                  label: '张三'
                },
                {
                  id: 7,
                  label: '李四'
                }
              ]
            },
            {
              id: 8,
              label: '公关领导'
            }
          ]
        },
        {
          id: 2,
          label: 'yy娱乐',
          children: [
            {
              id: 4,
              label: '王五'
            },
            {
              id: 5,
              label: '赵六'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'isLeaf',
        id: 'id'
      },
      dataTree1: []
    }
  },
  created() {
    this.dataTree1 = JSON.parse(JSON.stringify(this.dataTree))
  },
  methods: {
    searchValue() {
      this.$nextTick(() => {
        if (
          this.filterText &&
          this.filterText !== '' &&
          this.filterText !== null
        ) {
          this.openAll = true
          //关闭懒加载
          this.$refs.tree.$data.store.lazy = false
          //全部展开
          this.$refs.tree.$data.store.defaultExpandAll = true
          //深拷贝
          let options = JSON.parse(JSON.stringify(this.dataTree))
          //清空
          this.$set(this, 'dataTree', [])
          //筛选要显示的节点
          this.searchTrees(options, this.filterText)
          //重新赋值
          this.$set(this, 'dataTree', options)
        } else {
          this.openAll = false
          this.$refs.tree.$data.store.lazy = true
          this.$refs.tree.$data.store.defaultExpandAll = false
          this.$set(this, 'dataTree', this.dataTree1)
        }
      })
    },
    //循环树筛选要显示的节点
    searchTrees(arr, val) {
      let flag = false
      if (arr && arr.length > 0) {
        for (let i = arr.length - 1; i >= 0; i--) {
          if (arr[i].children && arr[i].children.length > 0) {
            let tempflag = this.searchTrees(arr[i].children, val)
            if (tempflag == false) {
              arr.splice(i, 1)
            } else {
              flag = true
            }
          } else {
            if (arr[i].label.indexOf(val) === -1) {
              arr.splice(i, 1)
            } else {
              flag = true
            }
          }
        }
        return flag
      }
    },
    //懒加载(根据自己的数据来写)
    loadNode(node, resolve) {
      this.$nextTick(() => {
        if (this.openAll === false) {
          if (node.level === 0) {
            let topData = []
            this.dataTree.forEach(item => {
              topData.push({ label: item.label, id: item.id, isLeaf: false })
            })
            return resolve(topData)
          }
          //一级下拉
          if (node.level === 1) {
            let firstData = []
            this.dataTree.forEach(item => {
              if (item.id === node.data.id) {
                item.children.forEach(e => {
                  firstData.push({
                    label: e.label,
                    id: e.id,
                    isLeaf: e.children ? false : true
                  })
                })
              }
            })
            return resolve(firstData)
          }
          // 二级下拉
          if (node.level === 2) {
            let secondData = []
            this.dataTree.forEach(item => {
              item.children.forEach(e => {
                if (e.id === node.data.id) {
                  e.children.forEach(i => {
                    secondData.push({
                      label: i.label,
                      id: i.id,
                      isLeaf: true
                    })
                  })
                }
              })
            })
            return resolve(secondData)
          }
        }
      })
    }
  }
}
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AI人工智能 时间序列数据介绍

AI人工智能 时间序列数据介绍 预测给定输入序列中的下一个是机器学习中的另一个重要概念。 本章为您提供有关分析时间序列数据的详细说明。 时间序列数据介绍 时间序列数据表示处于一系列特定时间间隔的数据。 如果我们想在机器学习中构建序列预测&#xff0c;那么必须处理连续…

DDei在线设计器-加载数据

加载数据 本示例演示了怎样加载已有的JSON到设计器中。 如需了解详细的API教程以及参数说明&#xff0c;请参考DDei文档 外部数据JSON demo.vue <script setup lang"ts"> import DDeiEditorView from "ddei-editor"; import { DDeiCoreStandLayou…

魔塔社区程序的`datasets.utils`导入`_datasets_server`错误问题的解决办法

运行魔塔社区的的一个识别图像文件中文字的模型程序&#xff1a; 出现如下的错误提示&#xff1a; from datasets.utils import _datasets_server,file_utils ImportError: cannot import name _datasets_server from datasets.utils (D:\PycharmProjects\minicpm_cuda_test\ve…

C语言指针详解(三)目录版

C语言指针详解&#xff08;三&#xff09;目录版 1、字符指针变量1.1、字符指针变量的一般应用1.2、常量字符串1.3、常量字符串与普通字符串的区别1.3.1 常量字符串的不可修改性1.3.2 常量字符串的存储 2、数组指针变量2.1、数组指针变量定义2.2、数组指针变量的初始化 3、二维…

数据科学家必须掌握的12个Python功能

Python 已经成为数据科学家的必选语言&#xff0c;从数据处理到机器学习&#xff0c;它几乎无所不能。本文将探讨一些Python特性&#xff0c;这些特性不仅能帮助你编写更高效、更易读、更易维护的代码&#xff0c;还特别适合数据科学的需求&#xff0c;使你的代码简洁且优雅。 …

选择 websim网站:一个用自然语言快速构建生成功能齐全的网站

Websim AI 是一个前沿的网站创建平台&#xff0c;旨在通过人工智能技术彻底改变网页设计流程。用户只需用自然语言描述他们的愿景&#xff0c;即可快速生成功能齐全的网站。该工具非常适合从初学者到经验丰富的开发人员使用&#xff0c;可以快速生成应用程序、网站原型或试验网…

【LLM大模型】“提示工程”的技术分类

尽管大模型非常强大&#xff0c;但仍然有着自身的局限。大模型可以生成看起来非常值得信赖的内容并引用外部资源&#xff0c;但是&#xff0c;大模型本身并不能直接访问互联网也不能访问互联网的资源。偏见往往会使大模型产生某些定型的内容。当被问到一个不知道答案的问题时&a…

在Pxe环境下使用kickstart自动化批量安装Linux系统

一、环境准备 1.rhel7.9操作系统 2.开启主机图形 systemctl set-default graphical.target reboot 如果你的服务器安装了图形&#xff0c;直接切换启动级别5&#xff1a; init 5 3.配置好ip&#xff0c;网关&#xff0c;dns地址 nmcli connection add ifname eth0 con-na…

初学Ubuntu及遇到的问题

初学Ubuntu及遇到的问题 Ubuntu的安装 1.安装VMware Workstation Pro&#xff08;网上有很多资料&#xff0c;本文就不细说啦~~~&#xff09; 2.在Ubuntu官网下载iso文件>https://mirrors.tuna.tsinghua.edu.cn/ubuntu-releases/20.04/ iso文件随便放在哪个位置&#xff…

免费【2024】springboot 电影院订票信息管理系统的设计与实现

博主介绍&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

计算机毕业设计选题推荐-教务管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

六点建议有效防止晶振老化

晶振作为电子设备中的关键元件&#xff0c;其稳定性直接影响到整个系统的性能。晶振老化是导致其性能下降的主要原因之一。为了延长晶振的使用寿命&#xff0c;以下六点建议将帮助您有效防止晶振老化。 防止晶振老化的六点建议 1.避免裸手触碰&#xff1a; 不要用裸手直接触…

蓝牙耳机哪个品牌质量最好最耐用?4款主流品牌开放式耳机测评

开放式蓝牙耳机现在确实是很火爆啊。2023年期间&#xff0c;中国蓝牙耳机市场的整体销量约为8552万台&#xff0c;同比增长了7.5%。其中&#xff0c;开放式耳机市场销量达到了652万台&#xff0c;同比增长了130.2%。那其实这些数据就表明了开放式蓝牙耳机在中国市场正迅速增长&…

java.net.BindException: 地址已在使用

java.net.BindException: 地址已在使用&#xff0c;也可以说是端口被占用&#xff0c;通常出现在启动服务的时候。 安装netstat&#xff1a; sudo yum install net-tools 1、出错地方如图所示&#xff1a; 2、执行netstat -alnp | grep 8125 3、kill - 9 1899

Linux学习第58天:Regmap API 实验

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 本章思维导图如下&#xff1a; 一、Regmap API简介 1、什么是Regmap 寄存器设置 Linux 下使用 i2c_transfer 来读写 I2C 设备中的寄存器&#xff0c; SPI 接口的话使…

Java:设计模式(单例,工厂,代理,命令,桥接,观察者)

模式是一条由三部分组成的通用规则&#xff1a;它代表了一个特定环境、一类问题和一个解决方案之间的关系。每一个模式描述了一个不断重复发生的问题&#xff0c;以及该问题解决方案的核心设计。 软件领域的设计模式定义&#xff1a;设计模式是对处于特定环境下&#xff0c;经常…

Spring统一功能处理:拦截器、响应与异常的统一管理

目录 一.拦截器 二.统一数据返回格式 三.统一异常处理 一.拦截器 拦截器是Spring框架提供的核⼼功能之⼀&#xff0c;主要⽤来拦截⽤⼾的请求&#xff0c;在指定⽅法前后&#xff0c;根据业务需要执⾏预先设定的代码。 也就是说&#xff0c;允许开发⼈员提前预定义⼀些逻辑…

全球情境感知计算市场规划预测:未来六年CAGR为17.0%

随着全球数字化转型的加速和物联网技术的广泛应用&#xff0c;情境感知计算作为一种能够理解和响应环境变化的智能技术&#xff0c;正逐渐受到更多关注。本文旨在通过深度分析情境感知计算行业的各个维度&#xff0c;揭示行业发展趋势和潜在机会。 【市场趋势的演变】 1. 市场…

C++——string类及其使用

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件iostream的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;Yan. yan.                        …

体系结构论文导读(三十一)(上):Soft errors in DNN accelerators: A comprehensive review

Soft errors in DNN accelerators: A comprehensive review DNN 加速器中的软错误&#xff1a;全面回顾 一、文章核心 深度学习任务覆盖了广泛应用。DNN算法被实现于不同系统上&#xff0c;从小型嵌入式设备到数据中心。DNN加速器&#xff08;例如GPU、FPGA、ASIC&#xff0…