vue Elemente-UI 管理后台自定义导航菜单栏

最新推荐文章于 2024-09-22 20:06:37 发布

盛夏O

最新推荐文章于 2024-09-22 20:06:37 发布

阅读量1k

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_53594467/article/details/127719562

版权

记录管理后台侧边导航栏做成通用小组件

借助 Elemente-UI <el-aside>：侧边栏容器 <<el-menu>：导航菜单

创建父组件页面

aside.vue

*（ default-active 为当前激活菜单的 index，（设置为当前的路由名称 this.$route.fullPath）

@select 事件为菜单选择触发的事件借助跳转路由并设置 default-active 的值）

创建子组件页面

NavMenuWk.vue

*（判断当前组路由有没有子级并判断是否显示路由 !navMenu.children&&!navMenu.hidden

将:index="navMenu.path" 设置为路由为menuSelected事件点击返回的参数 (:index的值只能是字符串)

icon 为图标

如果有子级继续调用本身再次进行循环 <NavMenu>）

设置route (可直接设置可使用服务端接口返回数据格式如下)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

盛夏O

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

【前端 VUE】vue Elemente-UI 管理后台自定义 导航菜单栏

悟空—

08-18

2694

记录管理后台侧边导航栏做成通用小组件借助Elemente-UI<el-aside>：侧边栏容器 <<el-menu>：导航菜单创建父组件页面 aside.vue *（ default-active 为当前激活菜单的 index，（设置为当前的路由名称 this.$route.fullPath） @select 事件为菜单选择触发的事件借助跳转路由并设置default-active 的值） <el-aside...

vue-quill-editor的使用以及自定义tabar菜单

qq_38152997的博客

02-13

1233

上一篇因为contenteditable IE的insertText 有兼容问题，所以重新用vue-quill-editor插件

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

Element-Ui组件 NavMenu 导航菜单的具体使用

12-30

本文来源于Element官方文档： http://element-cn.eleme.io/#/zh-CN/component/menu 基础用法普通导航菜单 <el default-active=activeIndex class=el-menu-demo mode=horizontal select=handleSelect> <el index=1>处理中心</el> <el index=2> <template slot=title>我的工作台</templat

菜单 vue3 h函数创建组件

qq_51389137的博客

07-31

543

【代码】菜单 vue3 h函数创建组件。

elementui 获取el-select，点击项的整个对象item

最新发布

weixin_54514048的博客

09-22

299

【代码】elementui 获取el-select，点击项的整个对象item。

vue+elementui实现侧边导航，select菜单激活回调函数实现路由跳转

weixin_46371752的博客

02-21

5222

1、系统页面布局采用的是elementui布局 <el-container> <el-aside width="200px"> <el-menu @select="menuClick">  <el-submenu index="1">

自定义修改element导航栏样式

m0_46120422的博客

12-18

1242

【代码】自定义修改element导航栏样式。

el-menu中的select属性

m0_47630333的博客

07-06

6324

示例：这个第一个参数是0 1 2 index值

vue element menu结合动态组件使用

honey_seve7n的博客

09-23

408

如何结合element 的menu 点击不同的菜单选项，在同一个页面里渲染不同内容呢？关键词：使用动态组件在同一个页面里渲染不同组件 <component :is="currentView"></component> 结合element上代码 html代码 <el-menu default-active="1" ...

vue-secondMenu-test:Vue + elementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏

05-10

Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏 项目实现了登录功能，一二级菜单联动选择展示不同的主体内容部分，封装了 axios 请求库，还配置了管理员和普通用户的权限区分。运行项目 npm ...

基于vue2.0+element-ui的管理后台实例源码

09-05

4. **组件设计**：Element UI 的组件可以被灵活地应用在这个管理后台中，如用于创建表单、展示数据、构建导航栏等。通过组合和自定义这些组件，开发者可以快速构建出符合业务需求的页面。 5. **响应式布局**：管理...

vue2-admin：基于Element UI的后台管理系统

02-07

vue2-管理员项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置请参阅。

android select下拉列表_超详细 ElementUI 源码分析 —— Select（模板篇）

weixin_39891158的博客

11-22

664

前言接下来是一段很痛苦的时间！！今天详细分析 Select 源码，在看到源码足足有九百行时，我整个人都是懵的，这是迄今为止读的最多的一篇源码，大概浏览了之后发现它里面有很多很多的知识点，光导入的模块就有 16 个，里面包含着各种组件、混入以及工具函数，所以鉴于本文篇幅有限，我打算分两部分来写，分别为：「模板篇」和「方法篇」，模板篇主要是分析 Select 模板以及一些比较简单的属性，方...

vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由

sunlizhen的专栏

12-10

2582

路由: const routes = [ { path: '/', name: 'Home', meta:{isLogin:true,title: 'Home'},// 添加该字段，表示进入这个路由是需要登录的 component: resolve=>(require(["@/views/index.vue"],resolve)), children: [ { path: '/monitor'.

el-menu 菜单组件的优化

Beam

08-23

1881

问题：选中菜单，路由跳转了，但需要点击两次才有选中的颜色。 F12查看，第一次点击时没有绑定上.isactive，第二次点击才绑定该样式。原来使用router模式是没有这个问题的，但是现在不用router模式，通过select方法跳转路由。原因： router模式下，路由根据index绑定值进行跳转。而index绑定值需要唯一，如果存在路由为空串’'容易出现点击空串的节点展开了全部等问题。并且系统中容易出现路由不唯一的情况，只有code\id\sn才能保证唯一性。于是只能舍弃router模式，@

vue element 下拉组件菜单

a814811587的博客

08-24

389

<template> <divclass="device-detail"> <el-menu@select="selectMenu":router="false":default-active="activeName"class="device-detail-nav"mode="horizontal"background-color="#fff"text-color="#333"active-text-color="#409eff"> ...

element-ui导航栏刷新保持点击状态

weixin_53663760的博客

11-02

2266

element-ui导航栏刷新保持点击状态功能最近在做项目的时候，有一个需求是刷新导航栏，可以保持点击选中的状态。经过我的研究以及搜索，我发现有一个方法 <el-menu ref="menu" @select="keep" router width=100% :default-active='activepath' class="el-menu-vertical-demo" background-c

项目前端（vue）记录

焦玉丽

10-16

904

在项目中用到的，边学边记这是一些小问题1.在不同的页面之间传实体1.1路由带参数1.2全局 localstorage1.3 $emit1.4 组件自带方法2.数值转换2.1 vue 字符串转数组2.2 数组转字符串样式改变from框中input的长度from 框增加提前判断规则div 居中 1.在不同的页面之间传实体 1.1路由带参数不需要带参数到下一页时，用路由地址跳转到main页 this...

Element Plus导航栏同时展开open和select方法的问题

byebukesi的博客

09-01

1622

Element Plus导航栏同时展开open和select方法的问题

Vue+Element-UI JYAdmin后台管理系统模板详解及axios封装

本文档深入解析了如何使用vue和element-ui框架构建JYAdmin后台管理系统模板，特别关注于项目搭建流程和技术细节。首先，我们从2020年6月29日的项目初始化开始，该阶段使用vue-cli工具进行基础搭建。本章节主要包括...

vue Elemente-UI 管理后台自定义 导航菜单栏

vue Elemente-UI 管理后台自定义导航菜单栏