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....
</el-menu-item> </template> <script> 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: ...
问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :router="true" background-color="#091639" text-color="#ff...
import myitem from "./components/myitem.vue"; // 引入递归菜单组件 export default { name: "Home", components: { myitem, // 注册一下 }, data() { return { activeIndex: this.$route.path, menuArr: [...] // 数据是上述我们模拟的数据,#后端返回的el-menu菜单数据# }; } }; ...
如下图: error 想了下应该是子菜单没有设置唯一标志index。而且/index这个路由在menus中也找不到,所以就默认匹配index===null的路由了?于是给el-menu-item加上index,果然好了。 总结 el-menu el-menu-item一定要设置唯一index。
vue element-ui 左侧菜单栏 el-menu属性实现动态菜单 基于renren-fast开源项目 下边的四个标签使我们常用的,列出来以示区分 在<el-menu>中需要--:default-active="this.$route.path"。用来绑定路由表 在<el-menu>中需要--router---或者router=true 在<el...
基于element-ui定义自己的Menu 菜单组件 在el-menu组件基础上扩展支持传递数据动态生成菜单项,使用方法与el-menu一样,增加了data 和 props 参数。 /** * 菜单组件 * @module widgets/my-menu * @example * * // 使用说明 */ export default { name: 'MyMenu',...
这里我们分两部分组件来实现,同样利用element-ui组件中的el-menu来定义导航菜单。直接利用路由来动态配置导航栏信息,在NavMenu中index 是菜单的唯一标识符,当启用 vue-router 的模式时导航以 index 作为 path 进行路由跳转。 递归实现导航菜单 这里我利用递归的方式来实现导航菜单,通过组件在自己的模板中调用自身,递归...
导航组件menu的一个属性:default-active 在el-menu中添加属性,然后就可以得到当我们点击的时候,就可以达到高亮的作用。 操作代码如下: 我们需要动态的绑定default-active default-active的使用 default-active需要传进去的值就是子导航的index值(也就是其路由值),达到点击路由就可以引起高亮。
el-header:顶栏容器 el-footer:底部栏容器 el-aside:侧边栏容器 el-main:页面主视图 icons的使用 在element-ui 中,图标是用class就可以搞定的。 比如一个编辑的图标就可以如下表示: 按钮(el-button) 按钮是el-button来表示的 按钮是分类的,每一种类型就对应不同的button。