vue2——使用Element-UI实现可搜索的树形结构

树形结构在日常开发中非常常见,例如菜单、组织架构等场景。Element-UI作为一款基于Vue.js的桌面端组件库,提供了丰富的组件供开发者使用。其中,Tree组件可以轻松实现树形结构的展示。但在实际项目中,我们往往需要实现可搜索的树形结构,以便用户能够快速找到所需节点。下面我们就来看看如何实现这一功能。

一、准备工作

  1. 确保您的项目中已经引入了Element-UI组件库。如果没有引入,请先执行以下命令:
npm install element-plus --save

     2.在项目中引入Tree组件和相关样式:

import { ElTree } from 'element-plus';
import 'element-plus/lib/theme-chalk/el-tree.css';export default {components: {ElTree}
}

二、实现可搜索树形结构

  1. 定义数据结构

首先,我们需要定义树形结构的数据。以下是一个简单的示例:

data() {return {treeData: [{id: 1,label: '一级节点1',children: [{id: 2,label: '二级节点1-1'},{id: 3,label: '二级节点1-2'}]},{id: 4,label: '一级节点2',children: [{id: 5,label: '二级节点2-1'}]}],filterText: ''};
}

2.渲染Tree组件

<el-inputplaceholder="输入关键字进行过滤"v-model="filterText">
</el-input><el-tree:data="treeData":props="defaultProps":filter-node-method="filterNode"ref="tree">
</el-tree>

3.实现搜索功能

通过监听输入框的值,调用Tree组件的filter方法实现搜索功能:

watch: {filterText(val) {this.$refs.tree.filter(val);}
},methods: {filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;}
}

 

 

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

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

相关文章

在k8s中,客户端访问服务的链路流程,ingress--->service--->deployment--->pod--->container

ingress是一个API资源。 其核心作用是nginx网页服务器。 当客户端访问服务器不同的url时, 用不同的location提供服务。 在k8s之外&#xff0c;nginx的配置一般如下&#xff1a; http {server {listen 80;server_name localhost;location / {root html; …

【鸿蒙OH-v5.0源码分析之 Linux Kernel 部分】003 - vmlinux.lds 链接脚本文件源码分析

【鸿蒙OH-v5.0源码分析之 Linux Kernel 部分】003 - vmlinux.lds 链接脚本文件源码分析 系列文章汇总:《鸿蒙OH-v5.0源码分析之 Uboot+Kernel 部分】000 - 文章链接汇总》 本文链接:《【鸿蒙OH-v5.0源码分析之 Linux Kernel 部分】003 - vmlinux.lds 链接脚本文件源码分析》 …

鸿蒙开发入门day19-使用NDK接口构建UI(一)

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;还请三连支持一波哇ヾ(&#xff20;^∇^&#xff20;)ノ&#xff09; 目录 NDK接口概述 整体架构 开发流程 接入ArkTS页面 占位组件 NDK组…

unity3d入门教程六

unity3d入门教程六 15.1预制体15.2编辑预制体15.3在场景中编辑15.4动态创建实例15.5实例的销毁16.1&#xff08;练习&#xff09;子弹发射16.2定时器16.3键盘事件 15.1预制体 火神山10天建成&#xff0c;使用了预制体技术 一个个小房间都是事先建造好的&#xff0c;最后吊车装…

观众登记2025中国(深圳)国际智能手机供应链展览会

时间&#xff1a;2024年4月9-11日 地点&#xff1a;深圳会展中心 ◆展会背景background&#xff1a; 近年来&#xff0c;国内手机品牌在全球市场上的影响力不断增强&#xff0c;华为、OPPO、VIVO和小米等…

ICPC网络赛 以及ACM训练总结

一、训练反思 关于我自己暑假期间训练的反思&#xff0c;我承认无论是因为什么原因&#xff0c;我自己浪费我整整一个暑假的时间&#xff0c;暑假期间正是我们集训的关键时期&#xff0c;这期间没有任何的事情来打扰我们学习&#xff0c;而我却熬夜&#xff0c;白天训练懈怠&a…

在服务器上开Juypter Lab教程(远程访问)

在服务器上开Juypter Lab教程&#xff08;远程访问&#xff09; 文章目录 在服务器上开Juypter Lab教程&#xff08;远程访问&#xff09;一、安装anaconda1、安装anaconda2、提权限3、运行4、同意协议5、安装6、是否要自动初始化 conda7、结束8、检查 二、Anaconda安装Pytorch…

python 自动化测试接口

比如我们要测试接口&#xff1a;identity/chatRecords/pages 已在Postman中有&#xff0c;那我们就可以直接从里面复制出Python脚本 新建&#xff1a; pagerequest.py import requests import jsonurl "http://192.168.31.132:70/identity/chatRecords/pages"payl…

下载MySQL Connector/c

MySQL :: Download MySQL Connector/C (Archived Versions) 其他语言&#xff1a; MySQL :: MySQL Product Archives

基于AgentUniverse在金融场景中的多智能体应用探索

基于AgentUniverse在金融场景中的多智能体应用探索 1.基于大模型智能体超级状态机 智能体、多智能体都是当下的技术热点,但作为一个技术人应该理解,所有的技术都有自己所针对的问题、及其能力边界,并不存在普适的、放诸业务场景皆 work 的技术方案。在这里尝试区分,从大模…

[数据集][目标检测]高铁受电弓检测数据集VOC+YOLO格式1245张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1245 标注数量(xml文件个数)&#xff1a;1245 标注数量(txt文件个数)&#xff1a;1245 标注…

2024年华为9月4日秋招笔试真题题解

2024年华为0904秋招笔试真题 二叉树消消乐好友推荐系统维修工力扣上类似的题--K站中转内最便宜的航班 二叉树消消乐 题目描述 给定原始二叉树和参照二叉树(输入的二叉树均为满二叉树&#xff0c;二叉树节点的值范围为[1,1000]&#xff0c;二叉树的深度不超过1000)&#xff0c…

线性表之单链表

在上一节我们学习了线性表中的顺序表&#xff0c;今天我们来学习一下线性表中的另一种结构——单链表 前言 我们在之前已经初步了解了数据结构中的两种逻辑结构&#xff0c;但线性结构中并非只有顺序表一种&#xff0c;它还有不少兄弟姐妹&#xff0c;今天我们再来学习一下单链…

Python基础语法(3)下

列表和元组 列表是什么&#xff0c;元组是什么 编程中&#xff0c;经常需要使用变量&#xff0c;来保存/表示数据。变量就是内存空间&#xff0c;用来表示或者存储数据。 如果代码中需要表示的数据个数比较少&#xff0c;我们直接创建多个变量即可。 num1 10 num2 20 num3…

[数据集][目标检测]葡萄成熟度检测数据集VOC+YOLO格式1123张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1123 标注数量(xml文件个数)&#xff1a;1123 标注数量(txt文件个数)&#xff1a;1123 标注…

【重学 MySQL】二十九、函数的理解

【重学 MySQL】二十九、函数的理解 什么是函数不同 DBMS 函数的差异函数名称和参数功能实现数据类型支持性能和优化兼容性和可移植性 MySQL 的内置函数及分类单行函数多行函数&#xff08;聚合函数&#xff09;使用注意事项 什么是函数 函数&#xff08;Function&#xff09;在…

系统架构设计师 需求分析篇二

&#x1f4d8; 面向对象分析方法 1. 用例模型 &#x1f4c8; 构建用例模型一般需要经历 4 个阶段&#xff1a; 识别参与者 &#x1f50d;&#xff1a;识别与系统交互的所有事物。合并需求获得用例 &#x1f517;&#xff1a;将需求分配给予其相关的参与者。细化用例描述 &am…

秋韵虫趣.

文章目录 虫鸣概览虫坛文化蟀种纷呈中华蟋蟀宁阳蟋蟀刻点铁蟋长颚斗蟋 油葫芦棺头蟋中华灶蟋小素蟋树皮蟋蟀 花生大蟋斑腿针蟋其他鸣虫树蟋&#xff0c;又名竹蛉、邯郸梨片蟋&#xff0c;又名金钟、天蛉、绿蛣蛉、银琵琶凯纳奥蟋&#xff0c;又名石蛉&#xff0c;鳞蟋黄蛉蟋&am…

在单机存储与分布式存储的技术选型中考虑的因素

在单机存储与分布式存储的技术选型中&#xff0c;可以从以下几个方面进行深入思考&#xff1a; 一、性能方面 读写性能 单机存储&#xff1a;在处理小规模数据量时&#xff0c;可能具有较高的读写速度。因为数据存储在单一设备上&#xff0c;访问路径相对较短&#xff0c;无需通…

uniapp中实现<text>文本内容点击可复制或拨打电话

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…