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://www.mzph.cn/news/699104.shtml

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

相关文章

<网络安全>《49 网络攻防专业课<第十三课 - 华为防火墙的使用(2)>

6 防火墙的防范技术 6.1 ARP攻击防范 攻击介绍 攻击者通过发送大量伪造的ARP请求、应答报文攻击网络设备&#xff0c;主要有ARP缓冲区溢出攻击和ARP拒绝服务攻击两种。 ARP Flood攻击&#xff08;ARP扫描攻击&#xff09;&#xff1a;攻击者利用工具扫描本网段或者跨网段主机时…

构造器详解

定义: 是一种特殊类型的方法&#xff0c;用于创建对象时初始化对象的状态。 使用new关键字创建对象 构造器特点: 1.和类名相同 2.没有返回值 public class Person {String name;public Person() {this.name"John";}}public class Test {public static void main…

vue2+element医院安全(不良)事件报告管理系统源代码

目录 安全不良事件类型 源码技术栈 医院安全&#xff08;不良&#xff09;事件报告管理系统采用无责的、自愿的填报不良事件方式&#xff0c;有效地减轻医护人员的思想压力&#xff0c;实现以事件为主要对象&#xff0c;可以自动、及时、实际地反应医院的安全、不良、近失事件…

测试环境搭建整套大数据系统(六:搭建sqoop)

一&#xff1a;下载安装包 https://archive.apache.org/dist/sqoop/ 二&#xff1a;解压修改配置。 tar -zxvf sqoop-1.4.7.bin__hadoop-2.6.0.tar.gz -C /opt cd /opt mv sqoop-1.4.7.bin__hadoop-2.6.0/ sqoop-1.4.7修改环境变量 vi /etc/profile#SQOOP_HOME export SQOOP_…

nginx-------- 高性能的 Web服务端 (四)

一、高级配置 1 .1网页的状态页 基于nginx 模块 ngx_http_stub_status_module 实现&#xff0c;在编译安装nginx的时候需要添加编译参数 --with-http_stub_status_module&#xff0c;否则配置完成之后监测会是提示语法错误注意: 状态页显示的是整个服务器的状态,而非虚拟主机…

【Android 性能优化:内存篇】——ExoPlayer 释放后内存没有恢复问题探索

背景 最近笔者承接项目的内存优化指标&#xff0c;在内存调研的过程中发现项目中视频播放结束后&#xff0c;内存没有恢复到播放前到水平。项目中用的 EXO 版本为2.19.1&#xff0c;并且笔者自己也写了个简单的 Demo&#xff0c;发现也是如此。虽然有一些偏门方法可以优化&…

4 buuctf解题

[CISCN 2019 初赛]Love Math1 打开题目 题目源码 <?php error_reporting(0); //听说你很喜欢数学&#xff0c;不知道你是否爱它胜过爱flag if(!isset($_GET[c])){show_source(__FILE__); }else{//例子 c20-1$content $_GET[c];if (strlen($content) > 80) {die("…

无人机的视频图传技术

在操控无人机时&#xff0c;视频图传技术显得尤为关键。通过这项技术&#xff0c;无人机的摄像头所捕捉的画面能实时回传至遥控器&#xff0c;使操作者全面掌握无人机的拍摄情况。同时&#xff0c;无人机图传技术也是衡量无人机性能的重要标准&#xff0c;它关乎飞行距离与时间…

【Vuforia+Unity】AR07-实现识别条码、二维码内容功能(Barcode Scanner)

Barcode Scanner in Unity | Vuforia Library官方教程&#xff0c;写的很详细&#xff0c;本教程主要参考对象&#xff01; 主要实现扫描生活中常见的二维码&#xff0c;然后弹出二维码链接&#xff0c;当然我们也可以再次回调自定义函数&#xff0c;弹出数字内容&#xff0c;…

编译GreatSQL with RocksDB引擎

GreatSQL里也能用上RocksDB引擎 1. 前言 RocksDB 是基于Facebook 开源的一种支持事务的、高度可压缩、高性能的MyRocks存储引擎&#xff0c;特别适用于高度压缩和大容量的数据。以下是一些关键特点&#xff1a; 高性能&#xff1a; LSM 树结构使得RocksDB在写入密集型负载下表现…

剪辑视频调色软件有哪些 剪辑视频软件哪个最好 剪辑视频怎么学 剪辑视频的方法和步骤 会声会影2024 会声会影视频制作教程

看了很多调色教程&#xff0c;背了一堆调色参数&#xff0c;可最终还是调不出理想的效果。别再怀疑自己了&#xff0c;不是你的剪辑技术不行&#xff0c;而是剪辑软件没选对。只要掌握了最基本的调色原理&#xff0c;一款适合自己的视频剪辑软件是很容易出片的。 有关剪辑视频…

python实现维特比算法

对于维特比算法&#xff0c;首先想到的就是高通公司&#xff0c;对于现在的通信行业的两大巨头公司之一&#xff0c;高通公司的发家是由器创始人维特比发明了一种高效的通信解码技术&#xff0c;维特比算法。 对于维特比算法是什么&#xff0c;以一个例子来讲述什么是维特比算…

如何查看Linux中运行了哪些应用

在Linux中&#xff0c;有多种方法可以查看正在运行的应用程序。以下是一些常用的命令&#xff1a; ps 命令&#xff1a;ps 命令用于显示当前终端会话中运行的进程。要查看系统上运行的所有进程&#xff0c;可以使用 -e 或 -A 选项。例如&#xff1a; ps -e或 ps -A这将列出所有…

TiDB离线部署、Tiup部署TiDB

先做tidb准备工作&#xff1a; 部署 TiDB 前的环境检查操作&#xff1a;TiDB 环境与系统配置检查 | PingCAP 文档中心 1.查看数据盘 fdisk -l &#xff08;2,3&#xff09;本人的分区已经是 ext4 文件系统不用分区&#xff0c;具体官方文档的分区&#xff1a; 4.查看数据盘…

Python reversed函数

在Python编程中&#xff0c;reversed()函数是一个内置函数&#xff0c;用于反转序列对象的元素顺序。这个函数可以应用于列表、元组、字符串等可迭代对象&#xff0c;并返回一个反向迭代器&#xff0c;可以按照相反的顺序遍历序列中的元素。本文将深入探讨Python中的reversed()…

Vue学习之计算属性

模板中的表达式虽然方便&#xff0c;但也只能用来做简单的操作。如果在模板中写太多逻辑&#xff0c;会让模板变得臃肿&#xff0c;难以维护。比如说&#xff0c;我们有这样一个包含嵌套数组的对象&#xff1a; const author reactive({name: John Doe,books: [Vue 2 - Advan…

【算法与数据结构】1971、LeetCode寻找图中是否存在路径

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题应用并查集的理论直接就可以解决&#xff1a;【算法与数据结构】回溯算法、贪心算法、动态规划、图…

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

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

【Docker】免费使用的腾讯云容器镜像服务

需要云服务器等云产品来学习Linux可以移步/-->腾讯云<--/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;新用户首次下单享超低折扣。 目录 1、设置密码 2、登录实例&#xff08;sudo docker login xxxxxx&#xff09; 3、新建命名空间&#xff08;每个命名空…

高刷电竞显示器 - HKC VG253KM

今天给大家分享一款高刷电竞显示器 - HKC VG253KM。 高刷电竞显示器 - HKC VG253KM源于雄鹰展翅翱翔的设计灵感&#xff0c;严格遵循黄金分割比例的蓝色点晴线条&#xff0c;加上雾面工艺及高低起伏错落有致的线条处理&#xff0c;在VG253KM的背部勾勒出宛若大鹏展翅的鹰翼图腾…