element-ui实现三级或多级导航菜单循环

项目中,菜单导航需要多级循环!

<el-menu router>
    <div v-for="(item,index) in submenuList" :key="index">
    <!-- 一级菜单(没有任何子级菜单)-->
    <el-menu-item :index="item.path" v-if="!item.menuList">{{item.title}}</el-menu-item>
         <!-- 一级菜单(有子级菜单)-->
         <el-submenu :index="item.path" v-else>
              <template slot="title">{{item.title}}</template>
                
              <!-- 遍历二级菜单容器 -->
              <div v-for="(i,index) in item.menuList" :key="index">
                  <!-- 判断二级菜单(没有三级菜单)-->
                  <el-menu-item :index="i.path" v-if="!i.list">{{i.title}}</el-menu-item>
                  
                  <!-- 判断二级菜单(有三级菜单)-->
                  <el-submenu :index="i.path" v-if="i.list">
                    <template slot="title">{{i.title}}</template>
                    <el-menu-item :index="j.path" v-for="(j,index) in i.list" :key="index">{{j.title}}       </el-menu-item>
                  </el-submenu>
              </div> 
          </el-submenu>
    </div>
 </el-menu>


submenuList:[
        {
          title:'概况',
          path:'/',
          icon:'el-icon-menu'
        },
        {
          title:'商铺',
          path:'/shop',
          icon:'el-icon-menu',
          menuList:[
            {
              title:'商铺设置',
              path:'/shop/overview',
              list:[
                {
                  title:'商铺分类',
                  path:'/',
                },
                {
                  title:'商铺采集',
                  path:'/',
                }
              ]
            },
            {
              title:'标签设置',
              path:'/shop/labels'
            }
          ]
        },
        {
          title:'订单',
          path:'/order',
          icon:'el-icon-menu',
          menuList:[
            {
              title:'订单设置',
              path:'/order/setting'
            },
            {
              title:'列表',
              path:'/order/group',
              list:[
                {
                  title:'团购分类',
                  path:'/',
                },
                {
                  title:'团购采集',
                  path:'/',
                }
              ]
            }
          ]
        }
      ]

  • 10
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Element UI实现多级右键菜单可以通过自定义指令和事件监听来实现。下面是一个简单的示例: 首先,你需要创建一个自定义指令来监听鼠标右键事件,并在触发时显示菜单。可以在 `main.js` 文件中注册该指令: ```javascript import Vue from 'vue' import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui' Vue.directive('contextmenu', { bind: function (el, binding, vnode) { el.addEventListener('contextmenu', function (event) { event.preventDefault() const dropdown = new Vue({ render: h => { return h(Dropdown, { props: { trigger: 'manual' }, on: { command: command => { vnode.context.$emit('command', command) dropdown.$destroy() } } }, [ h(DropdownMenu, null, binding.value.map(item => { return h(DropdownItem, { props: { command: item.command }, domProps: { innerHTML: item.label } }) })) ]) }, mounted() { this.$refs.dropdown.$el.style.position = 'fixed' this.$refs.dropdown.$el.style.left = `${event.clientX}px` this.$refs.dropdown.$el.style.top = `${event.clientY}px` this.$refs.dropdown.show() }, destroyed() { this.$refs.dropdown.hide() } }).$mount() document.body.appendChild(dropdown.$el) }) } }) ``` 然后,在你需要使用右键菜单的组件中,使用 `v-contextmenu` 指令来绑定右键菜单的内容和事件: ```html <template> <div v-contextmenu="contextMenuItems" @command="handleCommand"> Right click me </div> </template> <script> export default { data() { return { contextMenuItems: [ { label: 'Item 1', command: 'item1' }, { label: 'Item 2', command: 'item2' }, { label: 'Submenu', children: [ { label: 'Subitem 1', command: 'subitem1' }, { label: 'Subitem 2', command: 'subitem2' } ] } ] } }, methods: { handleCommand(command) { console.log('Command:', command) } } } </script> ``` 在这个例子中,右键菜单的内容由 `contextMenuItems` 数组定义,每个菜单项包括 `label` 和 `command` 两个属性。当菜单项被点击时,将会触发 `@command` 事件,并将对应的 `command` 参数传递给 `handleCommand` 方法进行处理。 通过这种方式,你可以实现多级的右键菜单。当右键点击目标元素时,菜单会在鼠标位置显示,并且可以处理菜单项的点击事件。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值