export default { name: 'MenuItem', // eslint-disable-next-line vue/require-prop-types props: ['menuData'], data() { return { // menuData: [{ menuId: '1', menuDesc: '导航1', parentMenu: null, children: [{ menuId: '1-1', menuDesc: '导航1-1', parentMenu: '1' }] }] ...
仔细读element官网上的menu属性,发现还有一个属性没用上,就是el-menu-item的router属性,它的值是vue router对象,通过尝试发现:default-active匹配的是index值,当将el-menu的router属性设置为true时,跳转的路由如果没有设置route,则使用的是index的值,如果写了route,则路由使用的是route的值,通过这一点儿特性,于是想...
items.forEach(item => { if (item[props.children] && item[props.children].length > 0) { nodes.push(this.createSubmenu(h, item)) } else { nodes.push(this.createItem(h, item)) } }) nodes.unshift(h('template', { slot: 'title' }, title)) return h('el-menu-item-group', null,...
<template> <div class="lj-left-menu"> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" background-color="#242F4B" text-color="#D2D5DE" active-text-color="#468FFE" ref="activeIndex" > <menu-item :menuData="menuData"></menu-item> ...
</el-menu-item> </el-menu> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 大家可以看到el-menu中添加了router选项,即开启了路由跳转地址,:default-active为什么要等于$route.path呢,是因为这样可以根据你跳转的地址来动态的切换...
components: { MenuItem }, data() { return { visibleRoutes: this.$store.getters.addRouters, searchText: '', filteredMenu: [], } }, computed: { matchedParentIds() { if (this.searchText === '') { return []; } let matchedParentIds = new Set(); // 使用 Set 来确保父级id的唯一...
i写在了title 插槽的外面,没有用具名插槽包裹,这意味着什么?意味着图标i是将渲染在el-menu-item...
-- 整体左侧导航 --><el-menuclass="el-menu-vertical-demo"router:default-active="activeMenu"background-color="#263238"text-color="#8a979e"active-text-color="#fff"><!-- 左侧导航栏抽取循环部分 将路由列表传给子组件--><asideBarItemv-for="router in routers":router="router":key="router....
2"><templateslot="title"><iclass="el-icon-location"></i><span>导航二</span></template><el-menu-item-group><el-menu-itemindex="/management/xinxi">选项1</el-menu-item><el-menu-itemindex="/management/xiangqing">选项2</el-menu-item></el-menu-item-group></el-submenu></el-menu><...
然后想到的方法是通过该属性判断当前的路由与当el-menu-item的路由相匹配。结果不出所料,成功了。 接着是左侧菜单的效果问题,在elementUI中,所有动画都是来自自己的npm包,我们可以自己做一个本地包去修改他的动画,但周期得不偿失,这里我就遇到了一个这样的问题:elementUI的左侧菜单缩小会缩小到60px;尔UI修改的...