ElementUI 中导航菜单中的小知识

最新推荐文章于 2024-05-22 18:11:34 发布
最新推荐文章于 2024-05-22 18:11:34 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： ElementUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41257129/article/details/104866545
版权
前面的话

最近做项目使用ElementUI框架，在这里记录几个知识点。

导航菜单的default-active的作用

其中在菜单上的属性值default-active，它的说明内容为：当前激活菜单的 index。（即当前哪一项被设置为高亮）

在这里插入图片描述
其实，即使不加这个属性，也能正常显示选中的item变亮，但是之所以要加这个属性，是为了浏览器刷新后，仍然可以定位到之前选中的路由。

collapse作用

设置为true可以折叠菜单栏：
在这里插入图片描述
否则默认展开：
在这里插入图片描述

crazy的蓝色梦想
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+Element-ui邮件管理前端界面
07-12
不用脚手架，无需创建vue工程 若element-ui显示故障： 1.查看是否引用 <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <!-- 引入element 的组件库--> <script src="https://unpkg.com/element-ui/lib/index.js"></script> 2.html代码是否被div包含 3.是否 var Ctor = Vue.extend(Main) new Ctor().$mount('#app')
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
主要介绍了Element-Ui组件 NavMenu 导航菜单的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element -Ui之NavMenu导航栏
m0_50007683的博客
05-03 1万+
一、NavMenu重要标签和参数说明 mode：导航栏的模式，默认值vertical 导航栏处于垂直状态，改为horizonta可变为水平模式。 index：唯一标志。 default-active：激活当前菜单的index。 router： 是否使用路由，启用后可以通过index作为地址进行跳转。 <el-menu-item index="1">导航栏中的子菜单标签。 <el-submenu> 生成二级菜单。 代码实现..
【Element入门】5、Element UI 导航组件详解
最新发布
weixin_52938153的博客
05-22 851
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
ElementUI笔记1（未写完）——导航栏
weixin_43914278的博客
07-27 318
NavMenu 导航菜单 导航菜单承载着管理系统中，选择某一大类功能的作用。那么导航栏的如何设计呢？ ElementUI官方文档有如下的代码，观察代码，首先引入眼帘的是橙黄色的index，index=""某个参数，这里只有一位数字表示第几号根目录，比如index=“2”，就对应“我的工作台”，由此不难理解另一个分支的概念，当index=“2-3”，表示我的工作台下的第三个分支，即选项3。这里slot意思为插槽，我们可以理解为子组件写好了一棵索引树，那么我的工作台是根目录，选项1，选项2，选项3为其结点（是
Elementui中El-menu导航栏
热门推荐
06-09 1万+
el-menu官方文档：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/menu 导航栏水平时去除底部白边： 注意：水平时去除底部白边是用的新添加的style标签实现的。其他方式不行，如用::deep，或者直接在原来的style中改，都不行 侧边栏展开时宽度：
ElementUI之首页导航+左侧菜单
weixin_66437564的博客
07-25 406
老大，接口文档还没输出，我的好多活干不下去啊！后端小哥，接口写好了没，我要测试啊！前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点。Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。拦截Ajax请求：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
ElementUI之首页导航&左侧菜单
theHider的博客
07-24 2556
为每个*.vue定义单独的xxx-mock.js文件，并在其中添加自定义的json数据，还可以通过mockjs的模块生成随机数据信息，动态测试ajax请求效果。创建。
ElementUI之首页导航及左侧菜单（模拟实现）
weixin_74352229的博客
09-26 3773
MockJS 是一款前端开发中常用的模拟数据生成工具，用于在开发过程中模拟接口返回数据。它可以帮助前端开发人员独立于后端接口进行开发和调试，提高开发效率。MockJS 提供了一套简单却强大的 API，可以根据指定的规则生成随机的模拟数据。通过MockJS，开发者可以定义接口的返回结构、数据类型以及各种约束条件，例如字符串长度、数字范围、日期格式等，从而模拟真实的接口返回结果。MockJS 的使用非常灵活，可以配合其他前端框架（如 Vue、React、Angular）或纯 JavaScript 进行集成。
【前端】Vue+Element UI案例：通用后台管理系统-导航栏
karshey的博客
11-01 1万+
【前端】Vue+Element UI案例：通用后台管理系统-导航栏
element ui NavMenu 实现侧边栏导航菜单
Igiveufireworks的博客
05-08 1974
使用Element UI 的 Container 布局容器和NavMenu导航菜单组件，使用router-view存放二级路由出口。根据v-for遍历菜单参数，渲染导航栏。
elementui 左侧或水平导航菜单栏与main区域联动
wyqshusan的博客
03-30 1441
elementui vue2.0 点击导航栏不同的菜单列表,可以在右侧 (Main) 主体区域显示不同的组件页面。
vue element UI 学习总结笔记（九）_ 导航菜单与路由
wh_xia_jun的专栏
05-29 5611
获取用户信息 我们把login和get_user_info两件事分开处理,我们在守卫路由中获取路由信息。 router.beforeEach((to, from, next) => { if (!(store.getters.savestate === 0)) { Message({ showClose: true, message: '正在编辑状态中,请先保存', type: 'error' }) next(false) .
浅浅element-ui导航栏封装使用学习一下
weixin_44254042的博客
06-15 522
elemnt-ui导航学习
基于vue-cli创建后台管理系统前端页面——element-ui，axios，跨域配置，布局初步，导航栏
Arya的博客，专注后端领域
09-03 1102
1.vue-cli创建前端工程，安装element-ui，axios和配置； 2.前端跨域的配置，请求添加Jwt的设置； 3.进行初始化布局，引入新增页面的方式； 4.home页面导航栏的设置，一级目录，二级目录；
Element UI导航菜单之秘：无痕迹浏览与历史记录栈的管理
Blog of Leviash
12-22 1396
在使用 Element UI 的 el-menu 导航栏菜单时，发现history栈（历史记录栈）会不断缓存之前的记录，而在某些场景下我们可能不希望history栈（历史记录栈）中有之前的记录，即实现无痕迹流量模式。
关于使用element-ui导航菜单栏NavMenu报错index无效问题！！！
天干地支甲
08-15 1502
** 报错非常苦恼，去官方文档看了看发现index必须使用string/null数据类型， ** 多么基础的错误，接口给我返回的是number，使用toString()转换一下方可，
elementui菜单导航
09-17
ElementUI是一套基于Vue.js的前端UI组件库，其中包括了菜单导航组件，方便开发者在网页中创建功能齐全的导航菜单。ElementUI的菜单导航组件可以根据需要灵活设置菜单的结构和样式。 在使用ElementUI菜单导航组件时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值