【组件】前端ElementUi 下拉Tree树形组件 带模糊搜索自动展开高亮功能 树结构 封装为组件使用
【组件】前端ElementUi 下拉Tree树形组件 带模糊搜索自动展开高亮功能 树结构
【组件】前端ElementUi 下拉Tree树形组件 带模糊
https://live.csdn.net/v/436057
单独使用
<template><div><el-popoverstyle="overflow-y: auto; "placement="bottom"trigger="click"><el-inputstyle="margin-bottom: 10px"v-model="搜索内容"clearable@clear="searchHandleIptClear"><el-button slot="append" icon="el-icon-search" @click="search" size="small" >搜索</el-button></el-input>
<!-- 树结构--><el-treestyle="width:auto"ref="tree":props="props":data="data":check-strictly="false"@check-change="handleCheckChange"show-checkboxnode-key="id":default-expanded-keys="需要展开的节点keys":default-checked-keys="[]"@node-click="handleNodeClick"><span class="custom-tree-node" slot-scope="{ node, data }">
<!-- 高亮的部分--><span v-if="需要高亮节点数组.indexOf(data.id) !== -1" style="background-color: yellow">{{ node.label }}</span>
<!-- 不需要高亮的部分--><span v-else>{{ node.label }}</span></span></el-tree>
<!-- 输入框 用来显示选中的节点内容--><el-input slot="reference"style="width:380px"v-model="value.label"placeholder="节点"clearablereadonly@clear="handleIptClear"></el-input></el-popover></div>
</template>
<script>
export default {data() {return {data: [{id: 1,label: '一级 1 A',children: [{id: 4,label: '二级 1-1 张三B',children: [{id: 9,label: '三级 1-1-1 李四C'}, {id: 10,label: '三级 1-1-2 王五a'}]}]}, {id: 2,label: '一级 2 赵六c',children: [{id: 5,label: '二级 2-1 张三b'}, {id: 6,label: '二级 2-2 李四a'}]}, {id: 3,label: '一级 3 王五D',children: [{id: 7,label: '二级 3-1 赵六d'}, {id: 8,label: '二级 3-2 钱七a'}]}],props: {label: 'label',children: 'children'},count: 1,value:{id:'', label: ''},需要高亮节点数组:[],需要展开的节点keys:[],搜索内容:''};},methods: {searchHandleIptClear(){this.需要高亮节点数组 = []},高亮模糊查询的节点递归(arr, 父节点){if(!arr || arr.length <= 0){return}let that = thisarr.forEach(item=>{//不区分大小写匹配if(item.label.toUpperCase().indexOf(that.搜索内容.toUpperCase()) !== -1){console.log('搜索内容匹配', that.搜索内容, item, 父节点)that.需要高亮节点数组.push(item.id);if(父节点){that.需要展开的节点keys.push(父节点.id)}}if(item.children){that.高亮模糊查询的节点递归(item.children, item)}})},/*** 点击搜索*/search(){let that = this//1 过滤所有内容that.需要高亮节点数组 = []that.需要展开的节点keys = []if(that.搜索内容){this.高亮模糊查询的节点递归(this.data, null)}//3 展开匹配到的节点内容},// 清空输入框内容handleIptClear(){console.log('清空输入框内容')//清空选中内容this.$refs.tree.setCheckedNodes([])this.value.id = ''this.value.label = ''},/*** 更新被选中的值*/updateCheck(){const seltedNodes = this.$refs.tree.getCheckedNodes()console.log(seltedNodes)const ids = seltedNodes.map(n => n.id)const labels = seltedNodes.map(n => n.label)this.value.id = ids + ''this.value.label = labels + ''},// checkbox被选中或取消选中handleCheckChange(arg1, arg2, arg3){console.log(arg1, arg2, arg3);this.updateCheck()},// 节点被点击handleNodeClick(arg1, arg2, arg3){console.log('nodes:', arg1, arg2, arg3)this.updateCheck()},}
};
</script>
封装为组件使用方法
引用方法
<template><div>
<!-- 树结构组件--><TreeSelectorref="TreeSelectorRef":treeData="treeData"搜索按钮名称="搜索"提示词placeholder="请点击选择":是否区分大小写="false"高亮样式Style="background-color: yellow"></TreeSelector><el-button @click="buttonClick">设置需要高亮的节点1</el-button><el-button @click="buttonClick2">设置需要高亮的节点2</el-button><el-button @click="getCheckedKeys">获取选中节点的keys</el-button><el-button @click="getCheckedNodes">获取选中节点的数据</el-button><el-button @click="setCheckedKeys">设置选中节点</el-button><el-button @click="appendSetCheckedKeys">追加设置选中节点</el-button></div>
</template>
<script>
//引用组件
import TreeSelector from '@/components/下拉框/下拉树组件.vue'export default {components:{TreeSelector},data() {return {treeData: [{id: 1,label: '一级 1 A',children: [{id: 4,label: '二级 1-1 张三B',children: [{id: 9,label: '三级 1-1-1 李四C'}, {id: 10,label: '三级 1-1-2 王五a'}]}]}, {id: 2,label: '一级 2 赵六c',children: [{id: 5,label: '二级 2-1 张三b'}, {id: 6,label: '二级 2-2 李四a'}]}, {id: 3,label: '一级 3 王五D',children: [{id: 7,label: '二级 3-1 赵六d'}, {id: 8,label: '二级 3-2 钱七a'}]}],};},methods: {buttonClick(){this.$refs.TreeSelectorRef.需要高亮节点数组 = [1, 2]},buttonClick2(){this.$refs.TreeSelectorRef.需要高亮节点数组 = [3]},/*** 获取选中的节点数据*/getCheckedNodes(){let 已选中的节点数据 = this.$refs.TreeSelectorRef.getCheckedNodes()console.log(已选中的节点数据)},/*** 获取选中的节点keys数据*/getCheckedKeys(){let 已选中的节点keys = this.$refs.TreeSelectorRef.getCheckedKeys()console.log(已选中的节点keys)},setCheckedKeys(){let checkArr = [1, 2]this.$refs.TreeSelectorRef.setCheckedKeys(checkArr)},/*** 追加设置选中的节点*/appendSetCheckedKeys(){let checkArr = [1]this.$refs.TreeSelectorRef.appendSetCheckedKeys(checkArr)}}
};
</script>
封装为组件
<template><div><!-- 使用 Element UI 的 Popover 组件实现下拉框 --><el-popoverstyle="overflow-y: auto; "placement="bottom"trigger="click"><!-- 输入框用于搜索树结构中的节点 --><el-inputstyle="margin-bottom: 10px"v-model="searchContent"clearable@clear="searchHandleIptClear"><el-button slot="append" icon="el-icon-search" @click="search" size="small" >{{搜索按钮名称}}</el-button></el-input><!-- 树结构展示数据 --><el-treestyle="width:auto"ref="tree":props="props":data="treeData":check-strictly="false"@check-change="handleCheckChange"show-checkboxnode-key="id":default-expanded-keys="需要展开的节点keys"@node-click="handleNodeClick"><span class="custom-tree-node" slot-scope="{ node, data }">
<!-- 高亮的部分--><span v-if="需要高亮节点数组 && 需要高亮节点数组.indexOf(data.id) !== -1" :style="高亮样式Style">{{ node.label }}</span>
<!-- 不需要高亮的部分--><span v-else>{{ node.label }}</span></span></el-tree>
<!-- 输入框 用来显示选中的节点内容--><el-input slot="reference"style="width:380px"v-model="value.label":placeholder="提示词placeholder"clearablereadonly@clear="handleIptClear">
<!-- 清除按钮--><islot="suffix"@click="IptClearClick"style="margin-top: 11px; cursor: pointer"class="el-icon-circle-close clear-button"></i></el-input></el-popover></div>
</template>
<script>
export default {name: 'TreeSelector', // 组件名称/*** 属性*/props: {// 树结构的数据源treeData: {type:Array,required:true,default:()=>[]},高亮样式Style: {type:String,default:()=>'background-color: yellow'},是否区分大小写: {type:Boolean,default:()=>false},//搜索按钮名称搜索按钮名称:{type:String,default:()=>'搜索'},//提示词placeholder提示词placeholder:{type:String,default:()=>'点击选择'},},data() {return {需要高亮节点数组:[],// 已选中的节点keys:[],需要展开的节点keys:[],searchContent:'',props: {label: 'label',children: 'children'},value:{id:'', label: ''},};},mounted() {},methods: {//清空搜索框内容事件searchHandleIptClear(){this.需要高亮节点数组 = []},高亮模糊查询的节点递归(arr, 父节点){if(!arr || arr.length <= 0){return}let that = thisarr.forEach(item=>{let labelTmp = item.label;let searchContentTmp = that.searchContent;//不区分大小写匹配if(that.是否区分大小写 === false){labelTmp = labelTmp.toUpperCase()searchContentTmp = searchContentTmp.toUpperCase()}if(labelTmp.indexOf(searchContentTmp) !== -1){// console.log('搜索内容匹配', that.searchContent, item, 父节点)that.需要高亮节点数组.push(item.id);if(父节点){that.需要展开的节点keys.push(父节点.id)}}if(item.children){that.高亮模糊查询的节点递归(item.children, item)}})},/*** 点击搜索*/search(){let that = this//1 过滤所有内容that.需要高亮节点数组 = []that.需要展开的节点keys = []if(that.searchContent){this.高亮模糊查询的节点递归(this.treeData, null)}},IptClearClick(event){// console.log(event)// event.preventDefault();this.handleIptClear()},// 清空输入框内容handleIptClear(){// console.log('清空输入框内容')//清空选中内容this.$refs.tree.setCheckedNodes([])this.value.id = ''this.value.label = ''},/*** 更新被选中的值*/updateCheck(){const seltedNodes = this.getCheckedNodes()// console.log(seltedNodes)const ids = seltedNodes.map(n => n.id)const labels = seltedNodes.map(n => n.label)this.value.id = ids + ''this.value.label = labels + ''},// checkbox被选中或取消选中handleCheckChange(arg1, arg2, arg3){// console.log(arg1, arg2, arg3);this.updateCheck()},// 节点被点击handleNodeClick(arg1, arg2, arg3){// console.log('nodes:', arg1, arg2, arg3)this.updateCheck()},/*** 获取已选中的节点集合*/getCheckedNodes(){return this.getTreeRef().getCheckedNodes();},/*** 获取已选中的节点keys集合*/getCheckedKeys(){return this.getCheckedNodes().map(n => n.id);},/*** 追加设置选中的节点* @param arr*/appendSetCheckedKeys(arr){let 已选中的keys = this.getCheckedKeys()const mergedArray = [...已选中的keys, ...arr];const mergedSet = new Set(mergedArray);this.setCheckedKeys(Array.from(mergedSet))},/*** 设置选中的节点* @param arr*/setCheckedKeys(arr){this.getTreeRef().setCheckedKeys(arr)},/*** 获取tree ref* https://element.eleme.cn/#/zh-CN/component/tree* @returns {HTMLElement}*/getTreeRef(){return this.$refs.tree;}}
};
</script>
相关文章:

【组件】前端ElementUi 下拉Tree树形组件 带模糊搜索自动展开高亮功能 树结构 封装为组件使用
【组件】前端ElementUi 下拉Tree树形组件 带模糊搜索自动展开高亮功能 树结构 【组件】前端ElementUi 下拉Tree树形组件 带模糊 https://live.csdn.net/v/436057 单独使用 <template><div><el-popoverstyle"overflow-y: auto; "placement"bottom…...
Blender 运行python脚本
Blender 运行python脚本 步骤 1:打开 Blender 首先,打开 Blender 软件。你可以从官方网站 [blender.org]( 下载最新的 Blender 版本,并按照安装向导进行安装。 步骤 2:打开“文本编辑器”面板 在 Blender 的默认布局中ÿ…...
递归:求fib数列的第n项,前几项是1,1,2,3,5,每一项都等于前面两项的和:JAVA
链接:登录—专业IT笔试面试备考平台_牛客网 来源:牛客网 求fib数列的第n项,前几项是1,1,2,3,5,每一项都等于前面两项的和 输入描述: 输入一个整数n,n<46 输出描述: 输出一个…...

三分钟快速掌握——Linux【vim】的使用及操作方法
一、vim的使用 vim是一个文本编辑器 非常小巧轻便 1.1如何进入vim编辑器 方法一: 首先使用touch 1.c 创建一个源文件 然后使用vim 1.c进入 方法二: 直接使用指令 vim 2.c 会直接创建一个2.c的源文件 退出时记得保存(使用wq或者x&am…...
Wrapper包装类
包装类又叫封装类,Java的数据类型有两种,基础数据类型是基础的,从狭义的角度看它们不是面向对象的,在引用数据类型中,有八个引用数据类型对应了八个基础数据类型,这个八个引用数据类型就叫做基础数据类型的…...
MySQL高级(六):全局锁、表锁和行锁
全局锁 (Global Lock) 定义 全局锁作用于整个 MySQL 实例。加上全局锁后,整个数据库实例会被锁定,其他线程无法对数据库中的任何表或数据进行读写操作。 使用方式 通过命令 FLUSH TABLES WITH READ LOCK (FTWRL) 来加全局锁。 特点 影响范围&#…...
【CLIP】3: semantic-text2image-search允许局域网访问
前后端都是局域网的在同一局域网内的其他设备上,打开浏览器,访问 http://192.168.50.197:5173/。前端 前端默认是本地的 (semantic-text2image-search) root@k8s-master-pfsrv:/home/zhangbin/perfwork/01_ai/01_semantic-text2image-search/frontend# npm run dev> web@…...

FPGA实现GTP光口视频转USB3.0传输,基于FT601+Aurora 8b/10b编解码架构,提供3套工程源码和技术支持
目录 1、前言工程概述免责声明 2、相关方案推荐我已有的所有工程源码总目录----方便你快速找到自己喜欢的项目我这里已有的 GT 高速接口解决方案本博已有的FPGA驱动USB通信方案 3、工程详细设计方案工程设计原理框图输入Sensor之-->OV5640摄像头输入Sensor之-->芯片解码的…...

docker搭建nginx
一. 直接启动nginx镜像 1. 下载nginx镜像 docker pull nginx 2. 运行镜像 docker run -p 8080:80 --name web -d nginx 3. 网址查看 xx.xx.xx.xx:8080 二. 挂在文件启动nginx镜像 1. 拷贝docker文件到本地 docker cp web:/etc/nginx/nginx.conf /root/data/config/nginx…...

Java 17的新特性及其对现代Java开发的影响
Java 17作为一个长期支持(LTS)版本,于2021年9月14日发布,引入了多项重要的新特性,这些特性不仅提高了Java语言的表现力和安全性,还优化了性能。本文将详细介绍Java 17的关键新特性,并探讨这些特…...

【Flink】快速理解 FlinkCDC 2.0 原理
快速理解 FlinkCDC 2.0 原理 要详细理解 Flink CDC 原理可以看看这篇文章,讲得很详细:深入解析 Flink CDC 增量快照读取机制 (https://juejin.cn/post/7325370003192578075)。 FlnkCDC 2.0: Flink 2.x 引入了增量快照读取机制,…...

使用R的数据包快速获取、调用各种地理数据
数据一直是科学研究绕不开的话题,为了方便快捷的获取各种地理数据,许多R包被开发出来,今天介绍一些方便快捷的数据R包。 rnaturalearth 包使 Natural Earth 数据可用。自然地球特征包括 1:10m、1:50m 和 1:…...

scrapy豆瓣爬虫增强-批量随机请求头
1.1 豆瓣爬虫增强,中间件随机请求头 1.2 清除原有的中间件,进行中间件测试 1.3 导入全新的中间件 1.4 运行爬虫,这个时候的请求头是固定的 1.5 强化对agent的输出,会舍弃输出cookie,使输出更明了 1.6 转移输出请求头位置 新增输出 造成这样问题的原因是Douban/Douban/settings…...

基于华为昇腾910B,实战InternLM个人小助手认知微调
本文将带领大家基于华为云 ModelArts,使用 XTuner 单卡微调一个 InternLM 个人小助手。 开源链接:(欢迎 star) https://github.com/InternLM/InternLM https://github.com/InternLM/xtuner XTuner 简介 XTuner 是一个高效、灵…...
Electron文件写入、读取(作用:公共全局变量,本地存储)
Electron文件写入、读取(作用:公共全局变量,本地存储) 使用Node.js的fs模块 也可以直接使用Node.js的fs模块来实现本地文件的读写操作 // electron/main.jsconst fs require(fs);// 写入文件localhost.txt fs.writeFileSync(lo…...

水体分割检测 包含YOLOV,COCO,VOC三种标记的数据集包含 857张图片
说明 水体分割检测指的是利用深度学习模型进行水体区域的分割和检测。YOLO(You Only Look Once)是一种流行的实时目标检测算法,其主要特点是速度快,适合于实时场景下的目标检测。 在水体分割检测中,可以使用YOLO算法来…...

Harbor安装、HTTPS配置、修改端口后不可访问?
Harbor安装、HTTPS配置、修改端口后不可访问? 大家好,我是秋意零。今天分享Harbor相关内容,安装部分可完全参考官方文档,写的也比较详细。 安装Harbor 官方文档:https://goharbor.io/docs/2.12.0/install-config/ …...
正定矩阵(Positive Definite Matrix)的定义与性质
正定矩阵(Positive Definite Matrix)的定义与性质 正定矩阵在优化、机器学习、信号处理等领域中有广泛应用。以下是其定义、几何解释及性质。 1. 定义 一个 n n n \times n nn 的实对称矩阵 A A A 是正定矩阵,当且仅当它满足以下等价条…...
React与Ant Design入门指南
创建基于React框架使用Ant Design组件库的技术文档时,我们需要涵盖从安装到使用的各个关键步骤。以下是一份简化的技术文档草稿,它旨在帮助开发者快速上手并开始构建界面。 React与Ant Design入门指南 1. 简介 Ant Design是一个致力于提供企业级UI设计…...
MAC卸载Vmware Fusion后无法再安装解决方案
MAC卸载Vmware Fusion后无法再安装解决方案 执行脚本 sudo rm -rf /Library/Application Support/VMware/VMware Fusion sudo rm -rf /Library/Application Support/VMware/Usbarb.rules sudo rm -rf /Library/Application Support/VMware Fusion sudo rm -rf /Library/Prefe…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

3.3.1_1 检错编码(奇偶校验码)
从这节课开始,我们会探讨数据链路层的差错控制功能,差错控制功能的主要目标是要发现并且解决一个帧内部的位错误,我们需要使用特殊的编码技术去发现帧内部的位错误,当我们发现位错误之后,通常来说有两种解决方案。第一…...

CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

【JVM】- 内存结构
引言 JVM:Java Virtual Machine 定义:Java虚拟机,Java二进制字节码的运行环境好处: 一次编写,到处运行自动内存管理,垃圾回收的功能数组下标越界检查(会抛异常,不会覆盖到其他代码…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...

自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...

Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...