Vue+elementUI动态渲染折叠导航el-menu

太过爱你忘了你带给我的痛 2023-07-24 08:21 60阅读 0赞

这是[官网上对折叠菜单的示例][Link 1]：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20200410101450348.png]  
我的项目需求就是这样，开始用：

// 折叠按钮
    <span @click="isCollapse = !isCollapse" title="菜单"></span>
    
    
    
    //  这些属性都在官网可查
    <el-menu
     :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @select="handleSelect"
      :unique-opened="true"
      active-text-color="#ffd04b"
      background-color="rgb(0, 101, 105)"
      text-color="#fff"
      :collapse="isCollapse"
      >
          <template v-for="(item, index) in storeHomeMenu">
              <el-submenu :index="item.index" v-if="item.children.length != 0"  :key="index*30">
                  <template slot="title">
                      <i :class="item.icons"></i>
                      <span slot="title">{
       {item.title}}</span>
                  </template>
                  <el-menu-item :index="items.index" v-for="(items, indexs) in item.children" :key="indexs">{
       {items.text}}</el-menu-item>
              </el-submenu>
              <el-menu-item :index="item.index" v-else  :key="index*2">
                  <i :class="item.icons"></i>
                  <span slot="title">{
       {item.title}}</span>
              </el-menu-item>
          </template>
    </el-menu>
    
    
    
    // js:
      data() {
        return {
            isCollapse: false,                    // 左侧导航是否为鼠标划入显示二级菜单
            activeIndex: '/',                     // 默认导航  
        }
      },
      computed: {
        storeHomeMenu () {
          return this.$store.state.homeShowMenu
        }
      },

ok，其实到这里我已经历经了℅％₃⊕∪≌％½∞…，成功渲染出可折叠的菜单了，接下来说写的过程中问题：

1.  这个菜单是动态渲染，所以必须要循环啊，但是循环的时候发现这个导航里面有的是有子菜单，有的没有子菜单，所以要使用`v-if`，问题来了，这`v-for和v-if`不能在一个组件上用啊
2.  ok，那我就给`el-menu`里面写了一个根组件`div`，把所有`el-menu-item,el-submenu`包裹，用它来循环
3.  然后问题来了，导航折叠后菜单文字不隐藏，因为`el-menu`里面放了一个`div`，而本来不应该放的
4.  ok，那就不要`div`了，换成`template`循环

实现了~~~

查阅的过程中发现很多童鞋说使用这个`<fragment> </fragment>`组件，[看看他的博客][Link 2]就明白了，如果你要单独拿出来封装的话，可能会需要这个东西。emmmm，其实我也偷偷用过，后来发现不用也行。

可以看看这两篇，有助理解：
    http://npm.taobao.org/package/vue-fragment          //  官网
    http://www.uxys.com/html/Vue/20200309/22750.html     // 详细解读

[Link 1]: https://element.eleme.cn/#/zh-CN/component/menu
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: /images/20230528/c7b1dd3f801243b79df55cc02124b9b6.png
[20200410101450348.png]: /images/20230528/59f6a86e290443b1a1b0cc00de45d50e.png
[Link 2]: https://blog.csdn.net/pangji0417/article/details/93353327?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1