这是官网上对折叠菜单的示例
在这里插入图片描述
在这里插入图片描述
我的项目需求就是这样,开始用:

// 折叠按钮
<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>组件,看看他的博客就明白了,如果你要单独拿出来封装的话,可能会需要这个东西。emmmm,其实我也偷偷用过,后来发现不用也行。

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

前往低代码交流专区

更多推荐