<iclass="el-icon-menu" /> <spanslot="title">{{ menuData.menuDesc }}</span> </el-menu-item> </template> <script> export default { name: 'MenuItem', // eslint-disable-next-line vue/require-prop-types props: ['menuData'], data() { return { // menuData: [{ menuId: '1',...
menu.querySelector('.el-submenu__title').click(); // 模拟点击父菜单标题来关闭父菜单 }); }, filterMenu(menu, searchText) { return menu.map(item => { let newItem = { ...item }; // Create a shallow copy of the item if (newItem.children && newItem.children.length) { newItem....
问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :router="true" background-color="#091639" text-color="#ff...
1. el-menu组件的mode属性可以设置为horizontal,vertical,和collapse,horizontal表示水平模式,vertical表示垂直模式,collapse表示折叠模式。 2. el-menu组件的default-active属性可以设置默认激活的菜单项,可以是一个字符串,也可以是一个数组。 3. el-menu组件的router属性可以设置为true,表示使用vue-router的路由模式,可...
首先,我们要和后端沟通返回的数据格式,我们知道前端的el-menu菜单的核心数据属性有四个: 菜单的名字name 点击菜单进行路由跳转的路径path 菜单上小图标icon 菜单是不是最内层的菜单,即children是否是空数组,当children为空的时候,就说明到菜单最里层了。(最里层的菜单children为空数组的时候,点击的时候,做路由跳转)...
在el-menu中有一个属性router,开发文档中写的非常清晰,选择该属性后即开启路由跳转,即点击el-menu中的子选项后会进行页面跳转,但是你必须将需要跳转的路由地址写为跟组件的子路由地址,否则点击跳转后会直接跳向路由地址对应的页面,这样就失去了我们想要实现的效果 ...
el-submenu> </el-menu> </template> <script> export default { name: "Menu", data() { return { // 在 el-menu 中绑定 :collapse="iscollapse" ,预设值为 false,展开菜单 iscollapse: false, }; }, mounted() { // 用事件总线绑定事件,兄弟组件触发后,就传递参数true/false,控制是否展开 this...
点击的时候不会选中菜单,页面不跳转。但是访问其他子页面后,通过浏览器回退按钮退回到index页面时,莫名就选中了2菜单栏,包括下面2个子菜单。如下图: error 想了下应该是子菜单没有设置唯一标志index。而且/index这个路由在menus中也找不到,所以就默认匹配index===null的路由了?于是给el-menu-item加上index,果然好...
场景:使用element ui NavMenu导航菜单,跳转到子页面,导航不高亮 解决方案 1、使用default-active绑定计算属性 2、使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转 image.png 3、计算属性 image.png computed:{ activeIndex() { const { name } = this.$route; switch (name...
<menu-item :menuData="menuData"></menu-item> </el-menu> </div></template><script>import menuItem from "./menuItem";export default { name: "leftMenu", components: { menuItem, }, data() { return { activeIndex: null, // 当前展开菜单 menuData: [ { i...