element导航菜单el-menu添加搜索功能

element导航菜单-侧栏，自带的功能没有搜索或者模糊查询。

找了找资料

找到一个比较可行的，记录一下：

//index.vue的代码
<div style="overflow:auto"><el-menu :default-active="$route.path":default-openeds="openeds":unique-opened="true"active-text-color="rgb(185, 143, 37)"text-color="#ADE0F6"class="el-menu-vertical-demo"background-color="#042939"style="border:0;"><MenuTree :menuList="newMenuList"></MenuTree></el-menu>
</div>//newMenuList组件的代码<div class="menuTree"><template v-for="(item,index) in menuList"><el-submenu :index="item.id +''":key="index+''"v-if="item.children && item.children.length>0"><template slot="title"><span @click.stop="routerClick(item)">{{item.label}}</span></template><MenuTree :menuList="item.children"></MenuTree></el-submenu><el-menu-item v-else:index="item.id+''":key="index+''"><span @click="routerClick(item)">{{item.label}}</span></el-menu-item></template></div>

<script>
import MenuTree from "./menuTree";
export default {name: 'leftAside',components: { MenuTree },props: ['transactionList'],data () {return {openeds: ["1", "2", "3", "4"],pathNumber: "",activeName: "first",filterText: "",menuList: [{id: 1,label: '主控',children: [{id: 2,label: '场地管理',children: [{id: 3,label: '数据中心',children: [{id: 4,label: '机房1',children: [{id: 5,label: '3D机房',value: "jifang"},{id: 6,label: '2D机房',value: "jifang"},]}]},{id: 7,label: '配电室',children: [{id: 8,label: '配电间1',},{id: 9,label: '配电间2',},{id: 10,label: '配电间3',},]},{id: 11,label: '网络间',children: [{id: 12,label: '交换机1',value: "jiaohuanji"},{id: 13,label: '交换机2',value: "jiaohuanji"},]}]},{id: 15,label: '监测系统',children: [{id: 16,label: '变压器监测',children: [{id: 17,label: '变压器组1',},{id: 18,label: '变压器组2',},{id: 19,label: '变压器组3',},]},{id: 20,label: '高压柜监测',children: [{id: 21,label: '高压柜组1',},{id: 22,label: '高压柜组2',},{id: 23,label: '高压柜组3',},]},{id: 24,label: '母排监测',children: [{id: 25,label: '母排柜1',value: "mupai"},{id: 26,label: '母排柜2',children: [{id: 27,label: 'M-2-01',value: "mupai"},{id: 28,label: 'M-2-02',value: "mupai"}]},{id: 29,label: '母排柜3',children: [{id: 30,label: 'M-3-01',value: "mupai"}, {id: 31,label: 'M-3-02',value: "mupai"},]},{id: 32,label: '母排柜4',children: [{id: 33,label: 'M-4-01',value: "mupai"}, {id: 34,label: 'M-4-02',value: "mupai"},]},{id: 35,label: '母排柜5',children: [{id: 36,label: 'M-5-01',value: "mupai"}, {id: 37,label: 'M-5-02',value: "mupai"},]},]},{id: 38,label: '空调监测',children: [{id: 39,label: '精密空调',children: [{id: 40,label: 'KT-W-05EVC',value: "kongtiaoEVC"},{id: 41,label: 'KT-E-01EVC',value: "kongtiaoEVC"},{id: 42,label: 'KT-E-03EVC',value: "kongtiaoEVC"},{id: 43,label: 'KT-E-04EVC',value: "kongtiaoEVC"},{id: 44,label: 'KT-E-05EVC',value: "kongtiaoEVC"},{id: 45,label: 'KT-E-02EMS',value: "kongtiaoEMS"},{id: 46,label: 'KT-E-06EMS',value: "kongtiaoEMS"},{id: 47,label: 'KT-W-02EMS',value: "kongtiaoEMS"},{id: 48,label: 'KT-W-04EMS',value: "kongtiaoEMS"},{id: 49,label: 'KT-W-06EMS',value: "kongtiaoEMS"},]},{id: 50,label: '列间空调',children: [{id: 51,label: '英维克',children: [{ id: 52, label: "LJKT-L2-02-EV", value: "kongtiaoEV" },{ id: 53, label: "LJKT-L2-04-EV", value: "kongtiaoEV" },{ id: 54, label: "LJKT-L2-06-EV", value: "kongtiaoEV" }]},{id: 55,label: '海信',children: [{ id: 56, label: "LJKT-L4-01-HX", value: "kongtiaoHX" },{ id: 57, label: "LJKT-L4-02-HX", value: "kongtiaoHX" },{ id: 58, label: "LJKT-L4-03-HX", value: "kongtiaoHX" },{ id: 59, label: "LJKT-L4-04-HX", value: "kongtiaoHX" },{ id: 60, label: "LJKT-L4-05-HX", value: "kongtiaoHX" },{ id: 61, label: "LJKT-L4-06-HX", value: "kongtiaoHX" },]},{id: 62,label: '维谛',children: [{ id: 63, label: "WD-A25-1", value: "kongtiaoWD" },{ id: 64, label: "WD-A25-2", value: "kongtiaoWD" },{ id: 65, label: "WD-A25-3", value: "kongtiaoWD" },{ id: 66, label: "WD-A25-4", value: "kongtiaoWD" },{ id: 67, label: "WD-A25-5", value: "kongtiaoWD" },{ id: 68, label: "WD-A25-6", value: "kongtiaoWD" },]},]},]},{id: 69,label: 'UPS监测',children: [{id: 70,label: 'UPS-400KVA-1',value: "UPS"},{id: 71,label: 'UPS-400KVA-2',value: "UPS"},{id: 72,label: 'UPS-400KVA-3',value: "UPS"},{id: 73,label: 'UPS-400KVA-4',value: "UPS",children: [{ id: 74, label: '电池组-1', value: "dianchi" },{ id: 75, label: '电池组-2', value: "dianchi" },{ id: 76, label: '电池组-3', value: "dianchi" },{ id: 77, label: '电池组-4', value: "dianchi" },]},{id: 78,label: 'UPS-200KVA-1',value: "UPS",children: [{ id: 79, label: '电池组-1', value: "dianchi" },{ id: 80, label: '电池组-2', value: "dianchi" },{ id: 81, label: '电池组-3', value: "dianchi" },{ id: 82, label: '电池组-4', value: "dianchi" },]},{id: 83,label: 'UPS-200KVA-2',value: "UPS",children: [{ id: 84, label: '电池组-1', value: "dianchi" },{ id: 85, label: '电池组-2', value: "dianchi" },{ id: 86, label: '电池组-3', value: "dianchi" },{ id: 87, label: '电池组-4', value: "dianchi" },]},{id: 88,label: 'UPS-200KVA-3',value: "UPS",children: [{ id: 89, label: '电池组-1', value: "dianchi" },{ id: 90, label: '电池组-2', value: "dianchi" },{ id: 91, label: '电池组-3', value: "dianchi" },{ id: 92, label: '电池组-4', value: "dianchi" },]},{id: 93,label: 'UPS-200KVA-4',value: "UPS",children: [{ id: 94, label: '电池组-1', value: "dianchi" },{ id: 95, label: '电池组-2', value: "dianchi" },{ id: 96, label: '电池组-3', value: "dianchi" },{ id: 97, label: '电池组-4', value: "dianchi" },]},{id: 98,label: '智能电表ET903',children: [{ id: 99, label: '200UPS输入柜', value: "dianbiao" },{ id: 100, label: '200UPS输出柜', value: "dianbiao" },{ id: 101, label: '400UPS输入', value: "dianbiao" },{ id: 102, label: '400UPS输入旁路', value: "dianbiao" },{ id: 103, label: '400UPS输出', value: "dianbiao" },{ id: 104, label: '空调柜', value: "dianbiao" },]},]},{id: 105,label: '漏水监测',children: [{ id: 106, label: '机房漏水传感器', value: "jinglou" },{ id: 107, label: 'UPS漏水传感器', value: "UPSlou" },]},{id: 108,label: '市电监测',children: [{ id: 109, label: '市电监控1', },{ id: 110, label: '市电监控2', },]},]}]}],newMenuList: [],// 当前筛选名称nameUser: '',// 当前筛选idnameId: [],// nameId: '',// 接受条件结果数组arr: [],// 接受条件结果对象obj: {},// 接受条件结果childrenchildren: [],// 模糊查询数组fuzzyArr: [],fuzzyChildrenArr: [],fuzzyChildrenArr1: [],fuzzyChildrenArr2: [],fuzzyChildrenArr3: [],fuzzyFlag: true,// 字节点newNodeId: []}},mounted () {console.log(this.menuList);if (this.transactionList) {this.newMenuList = this.transactionList} else {this.newMenuList = this.menuList}},methods: {// 差一个模糊查询search (val) {// 初始化this.arr = []this.nameId = []this.obj = {}this.children = []this.fuzzyArr = []this.fuzzyChildrenArr = []this.fuzzyChildrenArr1 = []this.fuzzyChildrenArr2 = []this.fuzzyChildrenArr3 = []// 正布if (val) {this.nameUser = val// 获取idthis.searchDg(this.menuList)// 遍历id查值if (this.nameId.length > 1) {for (var j = 0; j < this.nameId.length; j++) {this.arr.push(this.findPathByLeafId(this.nameId[j], this.menuList))}for (var q = 0; q < this.arr.length - 1; q++) {if (this.arr[q][this.arr[q].length - 2].id != this.arr[q + 1][this.arr[q + 1].length - 2].id) {this.fuzzyFlag = false} else {continue}}// 数组 arr // 最里层的childrenfor (var i = 0; i < this.arr.length - 1; i++) {if (this.arr[i][this.arr[i].length - 2].id == this.arr[i + 1][this.arr[i + 1].length - 2].id) {this.fuzzyChildrenArr1.push(this.arr[i][this.arr[i].length - 1])} else {this.fuzzyChildrenArr1.push(this.arr[i][this.arr[i].length - 1])this.fuzzyChildrenArr2.push(this.fuzzyChildrenArr1)this.fuzzyChildrenArr3.push(this.arr[i][this.arr[i].length - 2])this.fuzzyChildrenArr1 = []}}if (!this.fuzzyFlag) {if (i == this.arr.length - 1) {// 子this.fuzzyChildrenArr1.push(this.arr[i][this.arr[i].length - 1])this.fuzzyChildrenArr2.push(this.fuzzyChildrenArr1)// 父this.fuzzyChildrenArr3.push(this.arr[i][this.arr[i].length - 2])this.fuzzyChildrenArr1 = []// 重新赋值this.fuzzyChildrenArr = this.fuzzyChildrenArr2}} else {this.fuzzyChildrenArr = this.fuzzyChildrenArr1}// 判断是多组还是单组if (this.fuzzyFlag) {for (var i = this.arr[0].length - 2; i >= 0; i--) {this.obj = this.arr[0][i]if (i == this.arr[0].length - 2) {this.obj.children = this.fuzzyChildrenArr}else if (i !== this.arr[0].length - 1) {this.obj.children = [this.arr[0][i + 1]]}}} else {for (var w = 0; w < this.fuzzyChildrenArr3.length; w++) {this.fuzzyChildrenArr3[w].children = this.fuzzyChildrenArr[w]}for (var i = this.arr[0].length - 2; i >= 0; i--) {this.obj = this.arr[0][i]if (i == this.arr[0].length - 3) {this.obj.children = this.fuzzyChildrenArr3}else if (i !== this.arr[0].length - 1) {this.obj.children = [this.arr[0][i + 1]]}}}this.newMenuList = [this.obj]} else {this.arr = this.findPathByLeafId(this.nameId, this.menuList)// 单条for (var i = this.arr.length - 1; i >= 0; i--) {this.obj = this.arr[i]if (i !== this.arr.length - 1) {this.obj.children = [this.arr[i + 1]]}}this.newMenuList = [this.obj]}} else {this.newMenuList = this.menuList}},searchDg (data) {data.forEach(item => {if (item.label.includes(this.nameUser)) {this.nameId.push(item.id)} else {if (item.children) {this.searchDg(item.children)}}})},// 找出自己所在的位置的id和label  层级findPathByLeafId (leafId, nodes, path) {if (path === undefined) {path = [];}for (var i = 0; i < nodes.length; i++) {var tmpPath = path.concat();tmpPath.push({ id: nodes[i].id, label: nodes[i].label });if (leafId == nodes[i].id) {return tmpPath;}if (nodes[i].children) {var findResult = this.findPathByLeafId(leafId, nodes[i].children, tmpPath);if (findResult) {return findResult;}}}},// 查询子节点}
}
</script>

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

如何让程序员过一个没有烦恼的假日

如何让程序员过一个没有烦恼的假日

每逢假期、周末&#xff0c;总是被各种排障会和线上问题折磨&#xff0c;做什么都做不进去&#xff0c;也没法好好休息…… 常会听身边的同行们这样描述自己的假期。说实话&#xff0c;这感觉我可太熟悉不过了&#xff0c;因为这状态困扰了我好几年…… 不管你是正吃着火锅还是…
阅读更多...
时域系统到频域响应的直观解析及数学推导

时域系统到频域响应的直观解析及数学推导

课本里经常有已知系统时域的差分方程&#xff0c;求系统的频率响应这样的题&#xff0c;老师会讲怎么带公式进去解决&#xff0c;怎么查表解决&#xff0c;但我们总时无法直观地理解这两种转换的特殊关联在哪里&#xff0c;这篇文章以FIR滤波器为例&#xff0c;不仅列出了课本里…
阅读更多...
CHiME丨​MMCSG(智能眼镜多模态对话)

CHiME丨​MMCSG(智能眼镜多模态对话)

CHiME 挑战赛已经正式开启&#xff0c;今天分享下 CHiME 的子任务MMCSG(智能眼镜多模态对话)&#xff0c;欢迎大家投稿报名&#xff01; 赛事官网&#xff1a;https://www.chimechallenge.org/current/task3/index CHiME (Computational Hearing in Multisource Environments…
阅读更多...
最新版opencv4.9安装介绍，基本图像处理详解

最新版opencv4.9安装介绍，基本图像处理详解

文章目录 一、什么是OpenCV &#xff1f;二. OpenCV 安装1. 下载地址2.安装命令&#xff1a;pip install opencv-python 三、图像基础1. 基本概念2. 坐标系3. 基本操作&#xff08;彩色图片&#xff09;&#xff08;1&#xff09;读取图片&#xff1a;cv2.imread( )&#xff08…
阅读更多...
小程序--vscode配置

小程序--vscode配置

要在vscode里开发微信小程序&#xff0c;需要安装以下两个插件&#xff1a; 安装后&#xff0c;即可使用vscode开发微信小程序。 注&#xff1a;若要实现鼠标悬浮提示&#xff0c;则需新建jsconfig.json文件&#xff0c;并进行配置&#xff0c;即可实现。 jsconfig.json内容如…
阅读更多...
vue3新特性-defineOptions和defineModel

vue3新特性-defineOptions和defineModel

defineOptions 背景说明&#xff1a; 有 <script setup> 之前&#xff0c;如果要定义 props, emits 可以轻而易举地添加一个与 setup 平级的属性。 但是用了 <script setup> 后&#xff0c;就没法这么干了 setup 属性已经没有了&#xff0c;自然无法添加与其平…
阅读更多...
【Java程序设计】【C00278】基于Springboot的数码论坛管理系统（有论文）

【Java程序设计】【C00278】基于Springboot的数码论坛管理系统（有论文）

基于Springboot的数码论坛管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的数码论坛系统 本系统分为系统功能模块、管理员功能模块以及用户功能模块。 系统功能模块&#xff1a;在系统首页可以查看首页、…
阅读更多...
小程序生命周期解析（从概念、启动、运行、销毁到生命周期事件及场景的全面解析）

小程序生命周期解析（从概念、启动、运行、销毁到生命周期事件及场景的全面解析）

引言 在当今移动应用激烈竞争的时代&#xff0c;小程序作为一种轻量级、高效便捷的移动应用形式&#xff0c;逐渐成为用户和开发者的热门选择。小程序不仅以其小巧灵活的体积受到用户喜爱&#xff0c;更因为无需安装、即点即用的特性在移动应用领域取得了广泛的普及。随着小程…
阅读更多...
三好夫人品牌喜获“爱你一万年.com”中文域名，开启数字化新篇章

三好夫人品牌喜获“爱你一万年.com”中文域名，开启数字化新篇章

三好夫人&#xff0c;以中文域名“爱你一万年.com”强化品牌情感联结&#xff0c;预示全新市场布局。 【北京&#xff0c;2024年2月23日讯】 —— 中国领先的旺夫养生茶品牌“三好夫人”今日宣布&#xff0c;成功注册“爱你一万年.com”中文域名&#xff0c;标志着公司在加强品…
阅读更多...
亚马逊，速卖通，国际站测评补单的必要性与方法

亚马逊，速卖通，国际站测评补单的必要性与方法

亚马逊平台的规则与某宝有所不同。亚马逊平台没有产品推广引流和直通车等功能。而且&#xff0c;与某宝不同的是&#xff0c;亚马逊平台没有广告位和卖家客服。在某宝上&#xff0c;当我们选择款式和颜色时&#xff0c;通常会与卖家客服进行沟通。但在亚马逊上&#xff0c;没有…
阅读更多...
深入探索pdfplumber：从PDF中提取信息到实际项目应用【第94篇—pdfplumbe】

深入探索pdfplumber：从PDF中提取信息到实际项目应用【第94篇—pdfplumbe】

深入探索pdfplumber&#xff1a;从PDF中提取信息到实际项目应用 在数据处理和信息提取的过程中&#xff0c;PDF文档是一种常见的格式。然而&#xff0c;要从PDF中提取信息并进行进一步的分析&#xff0c;我们需要使用适当的工具。本文将介绍如何使用Python库中的pdfplumber库来…
阅读更多...
DataX - 全量数据同步工具

DataX - 全量数据同步工具

前言 今天是2024-2-21&#xff0c;农历正月十二&#xff0c;相信今天开始是新的阶段&#xff0c;尽管它不是新的周一、某月一日、某年第一天&#xff0c;尽管我是一个很讲究仪式感的人。新年刚过去 12 天&#xff0c;再过 3 天就开学咯&#xff0c;开学之后我的大学时光就进入了…
阅读更多...
STM32控制max30102读取血氧心率数据(keil5工程)

STM32控制max30102读取血氧心率数据(keil5工程)

一、前言 MAX30102是一款由Maxim Integrated推出的低功耗、高精度的心率和血氧饱和度检测传感器模块&#xff0c;适用于可穿戴设备如智能手环、智能手表等健康管理类电子产品。 该传感器主要特性如下&#xff1a; &#xff08;1&#xff09;光学测量&#xff1a;MAX30102内置…
阅读更多...
2024生物发酵展带您领略视觉盛宴-东滤器材

2024生物发酵展带您领略视觉盛宴-东滤器材

参展企业介绍 东滤器材&#xff08;石家庄&#xff09;有限公司是一家专注于微孔膜产品、深层过滤产品、纳米纤维产品、一次性过滤产品开发和应用的高科技企业&#xff0c;并于2022年顺利通过河北省“高新技术企业”权威认证。 公司拥有近两千平米符合GMP规范的十万级净化车间…
阅读更多...
springmvc基于springboot 的音乐播放系统 _7sdu8

springmvc基于springboot 的音乐播放系统 _7sdu8

这就意味着音乐播放系统的设计可以比其他系统更为出色的能力&#xff0c;可以更高效的完成最新的ymj排行榜、ymj音乐资讯等功能。 此系统设计主要采用的是JAVA语言来进行开发&#xff0c;JSP技术、采用SSM框架技术&#xff0c;框架分为三层&#xff0c;分别是控制层Controller&…
阅读更多...
NXP实战笔记（七）：S32K3xx基于RTD-SDK在S32DS上配置ICU输入捕获

NXP实战笔记（七）：S32K3xx基于RTD-SDK在S32DS上配置ICU输入捕获

目录 1、概述 2、输入捕获SDK配置 2.1、SAIC中断方式 2.2、IPWM或者IPM 1、概述 输入捕获&#xff0c;可以抓取高电平时间、低电平时间、占空比、周期、边沿检测与回调函数、边沿计数&#xff08;ABZ解码&#xff09;、时间戳、唤醒中断。 记录一下根据Emios模块实现上述部分…
阅读更多...
AGI｜AI到底如何生成视频？Sora究竟为何能引爆科技圈？

AGI｜AI到底如何生成视频？Sora究竟为何能引爆科技圈？

目录 一、AI生成视频引发新浪潮 二、生成方法及难点 三、Sora的突破进展 &#xff08;一&#xff09;可生成不同尺寸视频 &#xff08;二&#xff09;可生成1分钟时长视频 &#xff08;三&#xff09;图片生成视频 &#xff08;四&#xff09;场景一致性 &#xff08;五…
阅读更多...
【C++私房菜】面向对象中的简单继承

【C++私房菜】面向对象中的简单继承

文章目录 一、 继承基本概念二、派生类对象及派生类向基类的类型转换三、继承中的公有、私有和受保护的访问控制规则四、派生类的作用域五、继承中的静态成员 一、 继承基本概念 通过继承&#xff08;inheritance&#xff09;联系在一起的类构成一种层次关系。通常在层次关系的…
阅读更多...
Jenkins2.426.3运行时提示：mvn: command not found

Jenkins2.426.3运行时提示：mvn: command not found

Jenkins运行时提示&#xff1a;mvn: command not found 第一步&#xff0c;查看服务器上是否已正确安装maven环境 $mvn --version 如果没有显示上面的信息&#xff0c;则需要重新安装maven环境后再往下进行 第二步&#xff1a;Jenkins配置Maven 例如&#xff1a;/usr/local/…
阅读更多...
六、回归与聚类算法 - 欠拟合和过拟合

六、回归与聚类算法 - 欠拟合和过拟合

目录 1、定义 2、原因及解决方法 2.1 正则化 线性回归欠拟合与过拟合线性回归的改进 - 岭回归分类算法&#xff1a;逻辑回归模型保存与加载无监督学习&#xff1a;K-means算法 1、定义 2、原因及解决方法 2.1 正则化
阅读更多...
最新文章

Copyright @ 2022~2023