vue菜单栏前端模糊净赚查询

最新推荐文章于 2024-02-29 14:12:46 发布
最新推荐文章于 2024-02-29 14:12:46 发布
阅读量62 收藏
点赞数
分类专栏： 前端 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wqnmlgbsz/article/details/120669016
版权

输入字段   两种  一种输出匹配到的级别

<template>
	<div>
		<div @click="GroupChange('数据')">aaaaaaaaaaaaaaaaa</div>
	</div>
</template>

<script>
	export default {
		name: "App",
		data() {
			return {

				aaaaaaa: [
        {
            "icon": "",
            "name": "_home",
            "meta": {
                "title": "首页"
            }
        },
        {
            "icon": "ios-home-outline",
            "name": "",
            "meta": {
                "title": "配置管理",
                "icon": "ios-home-outline"
            },
            "children": [
                {
                    "icon": "",
                    "name": "EBasicApp",
                    "meta": {
                        "title": "应用系统维护",
                        "icon": ""
                    }
                },
                {
                    "icon": "",
                    "name": "EBasicSubApp",
                    "meta": {
                        "title": "子应用系统维护",
                        "icon": ""
                    }
                },
                {
                    "icon": "",
                    "name": "EBasicModule",
                    "meta": {
                        "title": "模块维护",
                        "icon": ""
                    }
                },
                {
                    "icon": "",
                    "name": "EBasicParameterCatalog",
                    "meta": {
                        "title": "应用系统参数配置",
                        "icon": ""
                    }
                },
                {
                    "icon": "",
                    "name": "EBasicAttributeDefinition",
                    "meta": {
                        "title": "属性定义",
                        "icon": ""
                    }
                },
                {
                    "icon": "",
                    "name": "EBasicMarkColumn",
                    "meta": {
                        "title": "字段修改痕迹保留配置",
                        "icon": ""
                    }
                    ,
                    "children": [{
                    "icon": "",
                    "name": "EBasicMarkRecord",
                    "meta": {
                        "title": "重要修改查询",
                        "icon": ""
                    },
                    "children": [{
                    "icon": "",
                    "name": "EBasicMarkRecord",
                    "meta": {
                        "title": "重要数据修改查询",
                        "icon": ""
                    }
                }]
                }]
                
                }
            ]
        },
        {
            "icon": "ios-home-outline",
            "name": "",
            "meta": {
                "title": "医疗机构",
                "icon": "ios-home-outline"
            },
            "children": [
                {
                    "icon": "",
                    "name": "EBasicOrg",
                    "meta": {
                        "title": "医疗机构维护",
                        "icon": ""
                    }
                },
                {
                    "icon": "",
                    "name": "EBasicDivision",
                    "meta": {
                        "title": "院区信息维护",
                        "icon": ""
                    }
                },
                {
                    "icon": "",
                    "name": "EBasicDept",
                    "meta": {
                        "title": "部门信息维护",
                        "icon": ""
                    }
                }
            ]
        },
        {
            "icon": "ios-home-outline",
            "name": "",
            "meta": {
                "title": "用户信息",
                "icon": "ios-home-outline"
            },
            "children": [
                {
                    "icon": "",
                    "name": "EBasicUser",
                    "meta": {
                        "title": "用户信息维护",
                        "icon": ""
                    }
                },
                {
                    "icon": "",
                    "name": "EBasicTestUser",
                    "meta": {
                        "title": "测试用户维护",
                        "icon": ""
                    }
                }
            ]
        },
        {
            "icon": "ios-home-outline",
            "name": "",
            "meta": {
                "title": "权限设置",
                "icon": "ios-home-outline"
            },
            "children": [
                {
                    "icon": "",
                    "name": "EBasicRole",
                    "meta": {
                        "title": "角色信息维护",
                        "icon": ""
                    },
                    "children": [
                        {
                            "icon": "",
                            "name": "EBasicDictionaryCatalog",
                            "meta": {
                                "title": "公共数据字典维护",
                                "icon": ""
                            }
                        }
                    ]
                }
            ]
        },
        {
            "icon": "ios-home-outline",
            "name": "",
            "meta": {
                "title": "安全管理",
                "icon": "ios-home-outline"
            },
            "children": [
                {
                    "icon": "",
                    "name": "EBasicLoginLog",
                    "meta": {
                        "title": "系统登录信息处理",
                        "icon": ""
                    }
                }
            ]
        },
        {
            "icon": "ios-home-outline",
            "name": "",
            "meta": {
                "title": "数据字典",
                "icon": "ios-home-outline"
            },
            "children": [
                {
                    "icon": "",
                    "name": "EBasicDictionaryCatalog",
                    "meta": {
                        "title": "公共数据字典维护",
                        "icon": ""
                    }
                },
                {
                    "icon": "",
                    "name": "EBasicNativePlace",
                    "meta": {
                        "title": "行政区划维护",
                        "icon": ""
                    }
                },
                {
                    "icon": "",
                    "name": "EBasicPywbAutocomplete",
                    "meta": {
                        "title": "拼音五笔自动补齐",
                        "icon": ""
                    }
                },
                {
                    "icon": "",
                    "name": "EBasicDmsCorrection",
                    "meta": {
                        "title": "数据修订",
                        "icon": ""
                    }
                },
                {
                    "icon": "",
                    "name": "EBasicDmsApprove",
                    "meta": {
                        "title": "审批申请",
                        "icon": ""
                    }
                }
            ]
        }
    ],
			}
		},
		methods: {
			
			
			
			
			
			
			
			//这个是多级
			GroupChange(e){
				console.log(this.filterArr(this.aaaaaaa, "数据"))
			},

    filterArr(arr, str){
        return arr.filter(v => {
            if(this.isInclude(v, str)){
                return true
            }else if(v.children && v.children.length){
                v.children = this.filterArr(v.children, str);
                return v.children.length;
            }
        })
    },
    
    isInclude(obj, str){
        if(!obj.meta || !obj.meta.title){
            return false
        }
        return obj.meta.title.indexOf(str) > -1
    },
			
			
			
			
			
			
			
			
			
			
			//这个不获取父级  只获取当前
			
//			getParentId(list, iid) {
//				for(let o of list || []) {
//					if(o.meta.title.indexOf(iid) != -1) {
//						this.ccccc.push(o)
//					} else {
//						this.ddddd = o
//						const o_ = this.getParentId(o.children, iid);
//					}
//
//				}
//				return this.ccccc
//			},
//
//			GroupChange(e) {
//				console.log(this.getParentId(this.aaaaaaa, e));
//				this.ccccc = []
//			},
			
			
	
		}
	}
</script>

，一种返回第一级以及对应子集

不会么么哒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DAY05JS学习--作用域 递归函数 对象 数组
weixin_51040108的博客
08-19 179
作用域 递归函数 对象 数组
Js 递归查找数组中指定条件的一组对象；
onlylele的博客
09-08 8110
需求：在多维数组中查找指定条件的对象，且取出该对象内容数据；数组数据格式如下： 实现：方法一： // 递归查找 getParentId(list, iid) { for(let o of list || []) { if(o.category_id == iid) return o const o_ = this.getParentId(o.children, iid) if(o_) return o_ } },
JS利用递归遍历数组，筛选得到需要的数据
Jack, what else can you do besides holding your little darling?
10-15 1509
前言 本文章是开发中遇到的问题，对于后端返回的数据中需要进行筛选的问题 代码如下 后端返回的数据中很多是我不需要的，所以进行筛选，如果使用axios中发送请求获取数据的话，可以在拦截器中进行操作 数据： let list = [ { "id": 1, "name": "11", "code": "22", "parentId": 0, "level": 0, "sort": 1, "isActive.
js 递归遍历对象、数组、属性
热门推荐
99guo的专栏
03-12 2万+
在前端工作时，有时我们需要遍历一些未知类型的对象。代码如下： //js遍历对象 function TraversalObject(obj) {     for (var a in obj) {         if (typeof (obj[a]) == "object") {             TraversalObject(obj[a]); //递归遍历         }
javascript递归遍历树形结构数组对象
chinahcp2008的博客
08-19 1776
/** * items 要遍历的数组 * childrenNodeName 子节点名称 * 执行后会直接更改原数组 */ function recursiveFunction(items, childrenNodeName) { // 获取数组长度 let len = items.length // 循环遍历数组 for (let i = 0; i < len; i++) { // 如果有子节点，递归遍历子节点 if (items[i][childrenNodeName].length
vue2过滤器模糊查询方法
10-18
在本例中，我们将探讨如何使用Vue2过滤器实现模糊查询，这在需要动态搜索列表数据时非常有用。模糊查询允许用户输入部分关键词，然后在数据集中找到匹配的项。 首先，我们需要创建一个Vue实例，并定义一个`search`...
vue实现顶部菜单栏
01-18
vue实现顶部菜单栏，同一个页面两个菜单按钮之间的切换 先看展示结果： 点击第一个按钮，显示内容1 点击第二个按钮，展示内容2 下面上源码：注意哦，一定要代码规划，别学我(⊙o⊙) ...
基于vue实现圆形菜单栏组件
10-16
主要介绍了基于vue实现的圆形菜单栏组件，本文通过实例代码，图文详解的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue 菜单栏点击切换单个class(高亮)的方法
10-18
在Vue.js中，实现菜单栏点击切换单个class（高亮）的功能是常见的需求，尤其是在构建具有导航功能的Web应用时。以下是一种简单而有效的方法： 首先，我们需要在Vue实例的数据属性中定义一个变量，用于存储当前选中...
Vue结合路由配置递归实现菜单栏功能
10-15
在Vue.js应用中，结合Vue Router进行菜单栏的动态渲染是一项常见的需求。本文将通过一个实例，探讨如何利用递归组件来实现一个包含一级、二级和三级菜单的多功能菜单栏。 首先，我们要创建一个基础的Vue项目，并...
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
10-22
本文给大家js遍历数组和遍历对象的区别，一般来说for用来遍历数组对象而for-in用来遍历非数组对象。接下来小编给大家带来了js遍历数组和对象的区别及js递归遍历对象、数组、属性的方法详解，一起看下吧
数组对象递归
weixin_43787161的博客
12-21 280
findDep(tdata, resData) { if (Array.isArray(tdata) && tdata.length > 0) { tdata.forEach(function(v, i) { resData[i] = {}; if (v.schemaType == 1 && v.children.length == 0) { resData[i].disabled = true; }
JS 数组操作（递归）
qq_39085895的博客
06-02 2256
多维度数组取其中符合条件的属性，数组扁平化并将所取属性存入数组 // 递归获取数组对象属性 export const traverse = (arr, newArr = []) => { for (let i = 0; i < arr.length; i++) { let a = {...arr[i]} if(a.children !== null){ newArr.push(a.caption) traverse(a.children, newA.
js中递归数组
zcs123ok的博客
07-26 6043
在js中，接口或者对象是这样的 { name: 'xiaoming', id: 1, children: [ { name: 'xiaoming2', id: 2, children: [] }, { name: 'xiaoming3', id: 3, children: [ { name: 'xiaoming4', id: 4 } ] } ] } 这个时候，我们需求是给每一个name添加'hh-'，
js 递归数组
weixin_45161039的博客
08-01 1844
//json对象 const json = { code: 200, data: [ { children: [ { id: 85, path: [0, 1, 85], pid: 1 }, { id: 86, path: [0, 1, 86], pid: 1 }, { id: 87, path: [0, 1, 87], pid: 1 }, { id: 153, path: [0, 1, 153], pid: 1 },
js从数组对象中查找出全符合一个对象的对象
ZH
02-20 3124
let price = null; goodsData.spec_data && goodsData.spec_data.some(item => { for (const key in specData) { if (Object.hasOwnProperty.call(specData, key)) { if (specData[key] !== item[key]) { return; ...
js递归数组对象，找到对应属性，并将属性所在树形结构上的另一个属性值进行拼接】
最新发布
weixin_39971163的博客
02-29 513
双重递归对象，取属性值
js 递归遍历查找对象数组的某一个属性
前端李小白的博客
11-18 8635
方法一： /** * @description: 递归遍历查找数组对象的某个值 * @param {string} code * @param {array} arr */ filterTableMater(code, arr) { const queue = [...arr] while (queue.length) { const o = queue.shift() if (o.code ===
js数组对象方法算法汇总、递归、前端搜索
Hzq88888的博客
07-11 308
【代码】js数组对象方法算法汇总、递归、前端搜索。
vue纯前端模糊查询案例
05-18
以下是一个基于 Vue 的纯前端模糊查询案例： HTML 代码： ```html <li v-for="item in filteredItems">{{ item.name }} ``` Vue 代码： ```javascript new Vue({ el: '#app', data: { searchTerm: '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值