当前位置: 首页 > news >正文

【组件】前端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&#xff1a;打开 Blender 首先&#xff0c;打开 Blender 软件。你可以从官方网站 [blender.org]( 下载最新的 Blender 版本&#xff0c;并按照安装向导进行安装。 步骤 2&#xff1a;打开“文本编辑器”面板 在 Blender 的默认布局中&#xff…...

递归:求fib数列的第n项,前几项是1,1,2,3,5,每一项都等于前面两项的和:JAVA

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 求fib数列的第n项&#xff0c;前几项是1&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;5,每一项都等于前面两项的和 输入描述: 输入一个整数n&#xff0c;n<46 输出描述: 输出一个…...

三分钟快速掌握——Linux【vim】的使用及操作方法

一、vim的使用 vim是一个文本编辑器 非常小巧轻便 1.1如何进入vim编辑器 方法一&#xff1a; 首先使用touch 1.c 创建一个源文件 然后使用vim 1.c进入 方法二&#xff1a; 直接使用指令 vim 2.c 会直接创建一个2.c的源文件 退出时记得保存&#xff08;使用wq或者x&am…...

Wrapper包装类

包装类又叫封装类&#xff0c;Java的数据类型有两种&#xff0c;基础数据类型是基础的&#xff0c;从狭义的角度看它们不是面向对象的&#xff0c;在引用数据类型中&#xff0c;有八个引用数据类型对应了八个基础数据类型&#xff0c;这个八个引用数据类型就叫做基础数据类型的…...

MySQL高级(六):全局锁、表锁和行锁

全局锁 (Global Lock) 定义 全局锁作用于整个 MySQL 实例。加上全局锁后&#xff0c;整个数据库实例会被锁定&#xff0c;其他线程无法对数据库中的任何表或数据进行读写操作。 使用方式 通过命令 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作为一个长期支持&#xff08;LTS&#xff09;版本&#xff0c;于2021年9月14日发布&#xff0c;引入了多项重要的新特性&#xff0c;这些特性不仅提高了Java语言的表现力和安全性&#xff0c;还优化了性能。本文将详细介绍Java 17的关键新特性&#xff0c;并探讨这些特…...

【Flink】快速理解 FlinkCDC 2.0 原理

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

使用R的数据包快速获取、调用各种地理数据

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

scrapy豆瓣爬虫增强-批量随机请求头

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

基于华为昇腾910B,实战InternLM个人小助手认知微调

本文将带领大家基于华为云 ModelArts&#xff0c;使用 XTuner 单卡微调一个 InternLM 个人小助手。 开源链接&#xff1a;&#xff08;欢迎 star&#xff09; https://github.com/InternLM/InternLM https://github.com/InternLM/xtuner XTuner 简介 XTuner 是一个高效、灵…...

Electron文件写入、读取(作用:公共全局变量,本地存储)

Electron文件写入、读取&#xff08;作用&#xff1a;公共全局变量&#xff0c;本地存储&#xff09; 使用Node.js的fs模块 也可以直接使用Node.js的fs模块来实现本地文件的读写操作 // electron/main.jsconst fs require(fs);// 写入文件localhost.txt fs.writeFileSync(lo…...

水体分割检测 包含YOLOV,COCO,VOC三种标记的数据集包含 857张图片

说明 水体分割检测指的是利用深度学习模型进行水体区域的分割和检测。YOLO&#xff08;You Only Look Once&#xff09;是一种流行的实时目标检测算法&#xff0c;其主要特点是速度快&#xff0c;适合于实时场景下的目标检测。 在水体分割检测中&#xff0c;可以使用YOLO算法来…...

Harbor安装、HTTPS配置、修改端口后不可访问?

Harbor安装、HTTPS配置、修改端口后不可访问&#xff1f; 大家好&#xff0c;我是秋意零。今天分享Harbor相关内容&#xff0c;安装部分可完全参考官方文档&#xff0c;写的也比较详细。 安装Harbor 官方文档&#xff1a;https://goharbor.io/docs/2.12.0/install-config/ …...

正定矩阵(Positive Definite Matrix)的定义与性质

正定矩阵&#xff08;Positive Definite Matrix&#xff09;的定义与性质 正定矩阵在优化、机器学习、信号处理等领域中有广泛应用。以下是其定义、几何解释及性质。 1. 定义 一个 n n n \times n nn 的实对称矩阵 A A A 是正定矩阵&#xff0c;当且仅当它满足以下等价条…...

React与Ant Design入门指南

创建基于React框架使用Ant Design组件库的技术文档时&#xff0c;我们需要涵盖从安装到使用的各个关键步骤。以下是一份简化的技术文档草稿&#xff0c;它旨在帮助开发者快速上手并开始构建界面。 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…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...