如何结合el-menu使用

学习交流

请教如何结合 el-menu来使用？

       <swiper :options="swiperOption">
          <el-menu class="el-menu-demo swiper-wrapper" mode="horizontal">
            <el-menu-item v-for="o in swiperSlides" :key="o" index="1">菜单{{o}}</el-menu-item>
          </el-menu>
        </swiper>



swiperOption: {
        slidesPerView: 'auto',
        navigation: {
          nextEl: '.swiper-next',
          prevEl: '.swiper-prev'
        }
      },

学习交流

我用这个方法解决了，不知道有无更好的方法：

1. <el-col style="width:calc(100% - 430px);display:flex">
   
2. 
   
3.           <div class="swiper-prev">
   
4.             <transition name="el-fade-in-linear">
   
5.               <i v-show="showLeftArr" class="el-icon-arrow-left"></i>
   
6.             </transition>
   
7.           </div>
   
8. 
   
9.           <div style="overflow:hidden">
   
10.             <el-menu class="swiper-wrapper menu-top" mode="horizontal" @select="handleMenuClick">
    
11.               <swiper ref="menuSwiper" :options="swiperOption">
    
12.                 <el-menu-item v-for="(item,index) in menuList" class="swiper-slide" :index="index.toString()" :key="item.id">{{item.name}}</el-menu-item>
    
13.               </swiper>
    
14.             </el-menu>
    
15.           </div>
    
16. 
    
17.           <div class="swiper-next">
    
18.             <transition name="el-fade-in-linear">
    
19.               <i v-show="showRightArr" class="el-icon-arrow-right"></i>
    
20.             </transition>
    
21.           </div>
    
22. 
    
23.         </el-col>

复制代码