javascript - vue 多级菜单数据过滤？
el-menu实现无线多层级的菜单数据过滤，菜单显示与不显示是后台可配置的，根据一个定义好的状态字段来显示，status为0不显示，反之显示。
LeftMenuTree.vue组件：
<template> <div> <template v-for="(item, index) in this.menuData"> <!-- 情况一：有子集的情况 --> <el-submenu :key="index" :index="String(index + 1)" v-if="item.children && item.children.length > 0"> <template slot="title"> <i :class="[item.icon || 'el-icon-menu']" style="color: #000"></i> <span slot="title" style="margin-left: 9px">{{item.menuName}}</span> </template> <left-menu-tree :menuData="item.children"></left-menu-tree> </el-submenu> <!-- 情况二：没子集的情况 --> <el-menu-item :key="index" v-else-if="item.menuStatus && item.menuStatus == 1" :index="String(index + 1)"> <i :class="[item.icon || 'el-icon-menu']" style="color: #fff"></i> <span slot="title">{{item.menuName}}</span> </el-menu-item> </template> </div></template><script>import { OPENTYPE } from "@/config/constant";export default { props: ['menuData'], name: 'LeftMenuTree',}</script>组件中使用：
<div class="left-menu"> <el-menu active-text-color="#303133" class="el-menu-vertical-demo" text-color="#606266" @open="handleOpen" @close="handleClose" > <left-menu-tree :menuData="menuList"></left-menu-tree> </el-menu></div>后端返回的数据结构如下：
const menuList= [ { menuName: '菜单一', menuStatus: 1, children: [ { menuName: 'ww', menuStatus: 0, }, { menuName: 'rr', menuStatus: 1, children: [ { menuName: 'tt', status: 1, children: [ { menuName: 'ooo', menuStatus: 0, }, { menuName: 'pp', menuStatus: 1, children: [ { menuName: 'ooo', menuStatus: 0, }, { menuName: 'pp', menuStatus: 0, }, ] }, ] }, { menuName: 'rr', menuStatus: 0, }, ] }, ] }, { menuName: '菜单二', menuStatus: 1, children: [ { menuName: 'bb', menuStatus: 0, }, { menuName: 'we', menuStatus: 0, }, ] }, { menuName: '菜单三', menuStatus: 1, }]这个时候就需要根据menuStatus状态值来显示，于是写了一个方法：
this.menuList.?.map(item => { return { ...item, children: item.children?.filter(item => item.menuStatus !== 0) } }) }但是过滤的不彻底，层级太多，就过滤不了，即使过滤了也还会显示菜单下拉项箭头。
求教大家对于层级太多的菜单怎么才能过滤出来menuStatus等于1的数据
共有2个答案
首先，你这个方法写得略有问题，不能过滤深层次的，可以参考下面这一段递归：
const trees = [ { label: 'l1', visiblity: true, children: [ { label: 'l1-1', visiblity: true, children: [ { label: 'l1-1-1', visiblity: true, children: [ { label: 'l1-1-1-1', visiblity: true, children: [ { label: 'l1-1-1-1-1', visiblity: true, children: [ { label: 'l1-1-1-1-1-1', visiblity: false }, { label: 'l1-1-1-1-1-2', visiblity: true } ] } ] } ] } ] } ] }, { label: 'l2', visiblity: true, children: [ { label: 'l2-1', visiblity: true, children: [ { label: 'l2-1-1', visiblity: true, children: [ { label: 'l2-1-1-1', visiblity: false, children: [ { label: 'l2-1-1-1-1', visiblity: true, children: [ { label: 'l2-1-1-1-1-1', visiblity: false }, { label: 'l2-1-1-1-1-2', visiblity: true } ] } ] } ] } ] } ] }];type TTreeItem = { label: string; visiblity: boolean; children?: TTreeItem[];};function filterTrees(data: TTreeItem[]) { return data.filter(x => { if (x.children) { x.children = filterTrees(x.children); !x.children.length && delete x.children; } return !!x.visiblity; });}console.log(filterTrees(trees));/*[{"label":"l1","visiblity":true,"children":[{"label":"l1-1","visiblity":true,"children":[{"label":"l1-1-1","visiblity":true,"children":[{"label":"l1-1-1-1","visiblity":true,"children":[{"label":"l1-1-1-1-1","visiblity":true,"children":[{"label":"l1-1-1-1-1-2","visiblity":true}]}]}]}]}]},{"label":"l2","visiblity":true,"children":[{"label":"l2-1","visiblity":true,"children":[{"label":"l2-1-1","visiblity":true}]}]}]*/第二，可以与 web 协商，status 作为接口入参，想要什么数据，接口加层过滤更合适些
function filterMenuData(menuData) { return menuData .filter(item => item.menuStatus === 1) .map(item => { if (item.children) { return { ...item, children: filterMenuData(item.children) }; } else { return item; } });}this.menuList = filterMenuData(this.menuList);-
本文向大家介绍vue实现多级菜单效果，包括了vue实现多级菜单效果的使用技巧和注意事项，需要的朋友参考一下 本次记录基于iview3框架实现多级菜单+vue router实现页面切换 方法一： 使用Tree 树形控件，官方文档 以官方demo为例，数据中添加URL属性，用于路由跳转，正式项目中该tree控件的数据由后端给出，需要注意的是后端给出的URL跳转地址最前一定要看清有没有"/" ，如果没有
-
本文向大家介绍jdk1.8+vue elementui实现多级菜单功能，包括了jdk1.8+vue elementui实现多级菜单功能的使用技巧和注意事项，需要的朋友参考一下 前言：在学习谷粒商城的时候，在做分类维护树形菜单维护的功能中，项目中只讲了菜单三级树怎么实现，想拓展一下多级菜单，功能已实现，记录一下，有不对的地方欢迎指正。 一、后端部分 使用Jdk1.8的新特性Stream和lamada
-
问题内容： 我正在使用SmartMenus创建一个下拉菜单。但是，我想动态创建菜单。React应用程序将向API服务器查询JSON代码，并从中构建一个菜单。我试图找出一种将JSON代码转换为HTML / JSX代码的方法： 从API检索到的JSON代码如下所示： 基于此JSON数据，我想生成以下HTML / JSX代码： 鉴于我正在使用多个级别的菜单，在React中混合使用JSX和html元素的有
-
本文向大家介绍Bootstrap3多级下拉菜单，包括了Bootstrap3多级下拉菜单的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Bootstrap下拉菜单的具体代码，供大家参考，具体内容如下 效果图： - 需要引用bootstrap.min.css和bootstrap.min.css.js - 代码如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教
-
本文向大家介绍javascript实现控制的多级下拉菜单，包括了javascript实现控制的多级下拉菜单的使用技巧和注意事项，需要的朋友参考一下 最近身体不适，所以没能如期的更新，抱歉。这里直接把代码贴上，如果有不明白的地方，留言就行。 效果图如下： 以上所述就是本文的全部内容了，希望大家能够喜欢。
-
问题内容： 通过使用twitter bootstrap 2的元素，可以有一个多级下拉菜单吗？原始版本没有此功能。 问题答案： 更新的答案 更新了支持v2.1.1 *引导程序版本样式表的答案。 **但是请小心，因为此解决方案已从v3中删除 只是想指出一点，因为最新的引导程序现在默认支持多级下拉菜单，因此不再需要此解决方案。如果您使用的是旧版本，则仍然可以使用它，但对于那些已更新到最新版本（在撰写本文