elementUi的菜单栏问题

elementUi菜单栏

说下几个UI框架

封装了大量的组件供我们使用

  • elementUI 饿了么
  • vantUI 有赞
  • iView 腾讯
  • ant-design 阿里
  • layUI、bootstrap 等等

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

看下官网说明,但是感觉有点不清楚用法,经过测试才发现:

需要在<el-menu></el-menu>中添加属性: :default-openeds="['xxx']"
然后在<el-menu-item></el-menu-item> 或者<el-submenu></el-submenu> 中添加属性 :index= "xxx"

但是还是有问题,也就是不论点击哪个菜单栏选项,都会展开那一项,问题啊

解决如下:
定义一个变量去接收
:default-openeds="openMenu"

:index="/xxx"  //这里因为以路由形式要跳转

 data() {
    return {
      // 默认展开的那个菜单栏
      openMenu: ["/xxx"],
    }
}

但是这里也是有些问题。先留着研究吧

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI 是一套基于 Vue.js 的开源组件库,其中的菜单组件提供了路由功能,方便我们构建网站或应用的导航菜单ElementUI菜单组件通过配置路由表来实现路由功能。首先,我们需要在 Vue 组件中引入 `vue-router` 路由库,并在 `main.js` 中将其注册到 Vue 实例上。然后,在路由表的配置文件中定义我们的路由信息。 路由表配置文件中,一般通过 `routes` 字段来定义路由信息。每个路由信息由一个对象表示,包含以下几个重要的属性: 1. `path`:表示路由的路径,可以是字符串或者正则表达式,用于匹配页面的 URL。 2. `name`:表示路由的名称,用于在代码中进行路由跳转。 3. `component`:表示路由对应的组件,可以是一个 Vue 组件或者动态加载组件的函数。 4. `children`:表示当前路由的子路由信息,用于构建嵌套路由。 除了上述属性之外,还可以使用其他属性来配置路由,例如 `meta` 来定义路由的元信息,`redirect` 来进行路由重定向。 在菜单组件中,我们可以通过 `el-menu` 元素来定义菜单的样式和布局,通过 `el-menu-item` 或 `el-submenu` 元素来定义菜单项。在菜单项中,我们可以通过 `index` 属性来指定其对应的路由路径。 ElementUI菜单组件还提供了一些事件和方法,例如 `select` 事件和 `toggleCollapse` 方法,用于处理菜单项选择和展开与折叠。 总之,ElementUI菜单组件结合了 Vue-Router 的路由功能,可以方便地实现网站或应用的导航菜单。通过配置路由表和使用菜单组件,我们可以轻松地构建出功能完善、交互友好的菜单导航。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值