element menu子菜单默认展开高亮

一切交给路由router

一、层级导航布局

element 默认展开子菜单，刷新路由展开子菜单，子菜单自动高亮

默认展开的组： default-openeds属性控制 === 值为数组defaultMenu包含所有的submenu 的index值

默认高亮的子菜单有属性active控制， active: currentMenu === menu.linkName

<template><div class="nav-menu"><el-menu:default-openeds="defaultMenu"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose":unique-opened="true"><el-submenu:index="nav.title"v-for="(nav, index) in group":key="index"class="title":class="{ active: currentTitle === nav.title }"@click="goHome(nav)"><template slot="title">{{ nav.title }}</template><el-menu-item:index="menu.linkName"v-for="(menu, idx) in nav.menus"class="menu":class="{ active: currentMenu === menu.linkName }"@click="setActive(nav.title, menu)":key="idx">{{ menu.tabName }}</el-menu-item></el-submenu></el-menu></div>
</template><script>
export default {components: {},data() {return {currentTitle: '',currentMenu: '',group: [],defaultMenu: [this.$t('header.myMarathon')]}},watch: {'$i18n.locale'() {this.setGroup()this.$emit('update', this.currentMenu)},$route() {this.initActivedTab()}},computed: {},created() {this.setGroup()this.initActivedTab()},mounted() {this.initActivedTab()},methods: {handleOpen(e) {console.log(e)if (e === this.$t('header.myMarathon')) {this.currentMenu = ''this.$router.push({ name: 'owner' })}},handleClose() {},setActive(title, menu) {this.currentTitle = titlethis.currentMenu = menu.linkNamethis.$emit('update', menu)this.$router.push({ name: menu.linkName })},setGroup() {this.group = [{title: this.$t('header.myMarathon')},{title: this.$t('user.game'),menus: [{ tabName: this.$t('user.apply'), linkName: 'userApply' },{ tabName: this.$t('user.results'), linkName: 'results' },{ tabName: this.$t('user.certificate'), linkName: 'certificate' },{ tabName: this.$t('user.photo'), linkName: 'photo' }]},{title: '我的志愿者',menus: [{ tabName: '我的报名', linkName: 'motorApply' },{ tabName: '我的证书', linkName: 'motorCert' },{ tabName: '我的徽章', linkName: 'badge' },{ tabName: '我的小组', linkName: 'group' },{ tabName: '我的兑换', linkName: 'exchange' }]},{title: this.$t('user.account'),menus: [{ tabName: this.$t('user.info'), linkName: 'info' },{ tabName: '我的消息', linkName: 'message' },{ tabName: this.$t('user.offspring'), linkName: 'offspring' },{ tabName: this.$t('user.integral'), linkName: 'integral' },{ tabName: this.$t('user.safe'), linkName: 'safe' }]}]},goHome(nav) {// this.currentTitle = nav.title// if (nav.title === this.$t('header.myMarathon')) {//   this.currentMenu = ''//   this.$router.push({ name: 'owner' })// } else {//   this.currentMenu = nav.menus[0].tabName//   this.$router.push({ name: nav.menus[0].linkName })// }},initActivedTab() {if (this.$route.name === 'owner') {this.currentTitle = this.$t('header.myMarathon')this.currentMenu = ''} else {this.group.some(el => {if (el.menus) {let res = el.menus.find(item => item.linkName === this.$route.name)if (res) {this.defaultMenu = [el.title]this.currentTitle = el.titlethis.currentMenu = res.linkNamereturn true}}})}}}
}
</script><style lang="scss" scoped>
.nav-menu {width: 264px;background: #ffffff;border-radius: 3px;padding: 0 17px 17px;font-size: 18px;overflow: hidden;color: #4a4a4a;/deep/ .title.active {background: #fff !important;}/deep/ .el-submenu__title {line-height: 55px;color: #2c3e6e !important;font-size: 18px !important;margin-top: 17px;cursor: pointer;&:hover {background: #fff;}}.el-submenu .el-menu-item {line-height: 55px;font-size: 18px;padding-left: 15px;margin-top: 17px;&:hover {background: #fff;}}.el-menu-item.active {color: #d7a746;background-color: #fff;}.el-menu-item {color: #000;background-color: #fff;}.title {line-height: 55px;color: #2c3e6e;padding-left: 15px;margin-top: 17px;cursor: pointer;&.active {background: #f4f4f4;position: relative;&::before {content: '';width: 2px;height: 55px;background: #2c3e6e;position: absolute;left: -17px;top: 0;}}}.muens {list-style: none;margin-top: 13px;.menu {line-height: 50px;padding-left: 20px;width: 229px;cursor: pointer;&.active {color: #d7a746;}}}
}
</style>

二、平铺布局将上面的代码中 html 局部替换即可

   <div v-for="(nav, index) in group" :key="index"><p class="title" :class="{ active: currentTitle === nav.title }" @click="goHome(nav)">{{ nav.title }}</p><ul class="muens"><liclass="menu":class="{ active: currentMenu === menu.linkName }"v-for="(menu, idx) in nav.menus":key="idx"@click="setActive(nav.title, menu)">{{ menu.tabName }}</li></ul></div>

保留部分函数

   goHome(nav) {this.currentTitle = nav.titleif (nav.title === this.$t('header.myMarathon')) {this.currentMenu = ''this.$router.push({ name: 'owner' })} else {this.currentMenu = nav.menus[0].tabNamethis.$router.push({ name: nav.menus[0].linkName })}},

element menu子菜单默认展开高亮相关推荐

使用element UI导航菜单默认展开选中子菜单
vue项目中使用的element UI导航菜单:官网例子导航菜单默认展开主要涉及的关键属性: default-active与default-openeds的主要区别: default-active可 ...
关于element ui中引入官方的NavMenu时出现点击某个子菜单时，所有的子菜单全都展开问题
前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家.大家及时保存,说不定啥时候就没了. 问题描述使用官方代 ...
Win11将右键菜单改回Win10右键菜单样式(右键菜单默认展开）
1,首先用鼠标右键点击"开始"按钮(或者按Win+X键),点击 Windows 终端(管理员) 2,在终端应用程序里粘贴下面的代码 win10右键菜单(展开) reg add &q ...
element菜单默认展开和选中
这两个属性, :default-openeds="openeds" default-active="/networkConfig"中设置的要与数组中的index ...
vue伸缩效果_Vue.js - 元素展开、收起动画效果组件（附：二级菜单的展开、收缩动画效果）...
子菜单的展开.收缩功能在许多系统上都很常见,如果想要在打开收起时带有动画效果,过去常常会通过 jQuery 实现.而在 Vue 项目中,我们可以单独封装一个动画组件,方便使用. 1,效果图点击一级菜 ...
Android菜单详解——子菜单（SubMenu）
1,子菜单就是将功能相同或相似的分组进行多级显示的一种菜单. 2,创建子菜单的步骤: a) 覆盖Activity的onCreateOptionsMenu()方法,调用Menu的addSubMenu() ...
Vue3 封装 Element Plus Menu 无限级菜单组件【建议收藏】
本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus el-menu 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单. 1 数据结构定义 ...
vue伸缩效果_Vue2(三)实现子菜单展开收缩，带动画效果实现方法
以前做这种操作就是简单的display:block,但现在用户的要求也越来越高,需要美观和动画感. 现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单. 看下效果图: 点开效果: 其实原理比较简单 ...
ASP.NET Menu控件子菜单弹出导致页面出现滚动条问题
ASP.NET Menu控件子菜单弹出的时候导致页面CSS属性的Min-Height产生变化,结果是原来全屏的画面,多出了纵滚动条.可以通过如下方法解决: 将ASP.NET控件放置到Table的单元格 ...

element menu子菜单默认展开高亮

一切交给路由router

一、层级导航布局

element 默认展开子菜单，刷新路由展开子菜单，子菜单自动高亮

默认展开的组： default-openeds属性控制 === 值为数组defaultMenu包含所有的submenu 的index值

默认高亮的子菜单有属性active控制， active: currentMenu === menu.linkName

二、平铺布局将上面的代码中 html 局部替换即可

保留部分函数

element menu子菜单默认展开高亮相关推荐

最新文章

热门文章

element menu子菜单默认展开高亮

一切交给路由router

一 、层级导航布局

element 默认展开子菜单，刷新路由展开子菜单，子菜单自动高亮

默认展开的组： default-openeds属性控制 === 值为数组defaultMenu包含所有的submenu 的index值

默认高亮的子菜单有属性active控制， active: currentMenu === menu.linkName

二、平铺布局 将上面的代码中 html 局部替换即可

保留部分函数

element menu子菜单默认展开高亮相关推荐

最新文章

热门文章

一、层级导航布局

二、平铺布局将上面的代码中 html 局部替换即可