前台-侧边菜单栏递归获取数据与点击处理

最新推荐文章于 2024-10-01 18:51:18 发布

codingFunTime

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量157

点赞数

分类专栏： key门户项目文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/hktkkkk/article/details/129023787

版权

key门户项目专栏收录该内容

37 篇文章 1 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了如何使用Vue.js在前端实现侧边菜单栏的数据递归加载，以及处理用户点击菜单时的相关逻辑。通过实例代码展示如何从服务器获取层级结构数据并构建动态菜单，同时讲解了事件监听和路由跳转的方法。

摘要由CSDN通过智能技术生成

// 处理default-openeds展开函数
	const openeds: Array<string> = []

	const menuDefaultOpeneds = (routerArray) => {
		routerArray.forEach((element: any) => {
			openeds.push(element.path)
			if (element.ch

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

codingFunTime

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

【Python数据结构与算法】递归----波兰表达式

Hello大家好，我是Dream，如果帮得到你，那我深感荣幸！交流学习、商务合作：https://bbs.csdn.net/topics/614347534

07-30

4万+

波兰表达式是一种把运算符前置的算术表达式，例如普通的表达式2 + 3的波兰表示法为+ 2 3。波兰表达式的优点是运算符之间不必有优先级关系，也不必用括号改变运算次序，例如(2 + 3) * 4的波兰表示法为* + 2 3 4。本题求解波兰表达式的值，其中运算符包括+ - * /四个。可使用atof(str)把字符串转换为一个double类型的浮点数。输入为一行，其中运算符和运算数之间都用空格分隔，运算数是浮点数。可直接用printf(“%f\n”, v)输出表达式的值v。输出为一行，表达式的值。

React + Ant Design 利用递归动态生成菜单栏

锋利的二丫

03-14

5967

React + Ant Design 利用递归动态生成菜单栏 自定义菜单配置文件 // menu-list.js // 引入菜单向需要的图标 import { HomeOutlined, AppstoreOutlined, UserOutlined, SettingOutlined, BarChartOutlined, LineChartOutlined, Unorde...

参与评论您还未登录，请先登录后发表或查看评论

递归方法响应展示前端多级目录菜单（路由）权限功能

Zhangss777的博客

05-20

1027

递归实现前端多层级路由目录菜单

记一次动态获取 vue-element-admin 侧边栏菜单

qq_22832075的博客

04-01

1119

一次在项目中需要动态获取侧边栏菜单。我使用了一种简单粗暴的方法。修改侧边栏组件，这里存放的就是侧边栏样式。将index.vue备份然后删除里面的内容，修改为下面的，这样每次请求就会发送请求获取相应的菜单栏然后遍历出来。 <template> <div class="cen"> <el-menu router class="el-menu-vertical-demo" :collapse="isCollapse"

element ui左侧菜单栏从后台获取数据

Meditation_Crazy

12-18

4784

前言 菜单栏数据实现从后天获取实现代码 <el-menu background-color="#393e46" text-color="#fff"> <el-menu-item :class="getMenuSwitchState?'close':'open'"> <i class="el-icon-position" style="color...

Vue3+Element-Plus 动态加载主页Aside(左侧)菜单数据二五

build2024

12-06

5403

1. 通过接口动态获取左侧菜单数据 1.1 获取接口前的注意事项 1. 按照接口文档要求，除了登录接口外，需要授权的API必须要在请求头中使用Authorization 字段提供 token 令牌意思是说，访问接口必须得到服务器授权才能正常调用。 2. 如何获取服务器的授权认证。前面章节已经讲过，登录成功后。服务器端会返回一个登录成功后的（ token）令牌，这个token 令牌就是权限认证的字段（Authorization）所以在请求一些授权API时，必须在请求头中使用（...

通过后台接口获取菜单数据

lucky的专栏

04-22

1841

axios请求拦截器 axios请求拦截器后台除了登录接口之外，都需要token权限验证，我们可以通过添加axios请求拦截器来添加token，以保证拥有获取数据的权限在main.js中添加代码，在将axios挂载到vue原型之前添加下面的代码 ``` //请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息 axios.interceptors.request.use(c...

Java应用之--------递归获取部门信息树结构（Mybatis，SqlServer）

wangruoao的博客

12-14

3804

最近得到了如下需求：公司新增部门的时候，可以选择上级部门，此时这个公司下所有的部门信息可以以树形结构返回给前端，类似于下图（网上找的一张）。集成开发环境：Java JDK 1.8，Mybatis，SQL server，IDEA。数据库表结构的设计：部门信息为一张表，id为自增主键；companyId为公司的ID（可以联想到还有一张公司表，这里不展示公司信息表）；parentId为上级部...

递归得到菜单

02-09

通过递归的方法得到网站后台的管理菜单

算法笔记----递归算法

weixin_52206295的博客

11-22

3614

适合小白学习的递归算法！

递归查询多级菜单数据的算法

weixin_46266624的博客

05-22

232

【代码】递归查询多级菜单数据的算法。

element-ui 的 el-menu 菜单实现点击 el-submenu 也可以跳转页面

weixin_44990895的博客

05-13

1万+

【代码】element-ui 的 el-menu 菜单实现点击 el-submenu 也可以跳转页面。

vue3使用el-menu多级菜单出现点击一个全部展开的问题

m0_46442118的博客

04-07

5067

虽然点击菜单其它的子菜单不会展开了，但是index存的是编号，url存的是路由地址，点击子菜单地址栏显示的是编号信息，不是地址，如图所示。测试时发现单击菜单显示子菜单时其它的菜单也被展开，看了其它文章写的是修改。，发现只有叶子菜单的数据才配置了url,其它级别的则为空数据，所以就导致了配置。注意：后端数据库url和index传的值是唯一的，也不能出现两个空值。:index="menu.url"时出现点击一个全部展开的情况。el-sub-menu中的:index值为menu.index，

element-ui侧边栏实现路由跳转后展开对应侧边栏：default-openeds

Liubaowen_的博客

06-15

4033

element-ui侧边栏实现路由跳转后展开对应侧边栏：default-openeds 当菜单是在本地写死时，如果想展开第一块内容、里面就只写1 :default-openeds="[‘1’]" 如果想展开其余的。想写哪个就写哪个： :default-openeds="[‘1’, ‘2’, ‘3’]" 当菜单是动态获取时，点击跳转之后如何展开对应的菜单，在watch中监听路由的变化，根据菜单数据源遍历得到对应的index就可以了解决方案： watch:{ // this.$rou

elementui中el-menu组件的用法