vue下element如果实现菜单el-menu多级循环

1、首先整理下逻辑!

循环,如果有下级,则输出下拉样式,如果没有,则直接输出el-menu-item

v-for
  |-- v-if
    |-- v-for
       |-- v-if
          |-- v-for
              |-- v-if
                 输出下拉菜单样式
              |-- v-else
       |-- v-else
        
  |-- v-else

2、然后我们来组织代码

这是一份模板的输出!

  <template v-for="item in item.children"> <!-- 1 v-for -->
   <template v-if="item.children && item.children.length>0"><!--1 v-if -->
     <template v-for="item in item.children"><!--2 v-for -->
        <template v-if="item.children && item.children.length>0"><!--2 v-if -->
           <template v-for="item in item.children"><!--3 v-for -->
                  直接结束,如果你还有,则继续增加
           </template> <!--over 3 v-for -->
          </template> <!--over 2 v-if -->
          <template v-else></template> 
        </template><!--over 2 v-for -->
      </template><!--over 1 v-if -->
    <template v-else></template> 
  </template> <!--over 1 v-for -->

3、插入模板内容

这个可以直接参考element的导航菜单模块,这里简单说下

<el-menu>
  <!-- 如果是下拉菜单则加elsubment -->
  <el-submenu :index="item.id">
            <template slot="title"> {{item.typename}}</template>
       <el-menu-item>{{item.typename}}</el-menu-item>
  </el-submenu> 
  <!-- 非下拉菜单 -->   
  <el-menu-item>{{item.typename}}</el-menu-item>
</el-menu>

那我们来输入完整的代码!

那我们只需要把!v-else里面全部替换成非下拉菜单! 

然后每次v-if输出一个el-submenu 和一个菜单标题,全部代码如下:

<template v-for="item in contents">
  <!-- 1 v-for -->
  <template v-if="item.children && item.children.length>0">
    <!--1 v-if -->
    <el-submenu :index="item.id">
      <template slot="title"> {{item.typename}}</template>
      <template v-for="item in item.children">
        <!--2 v-for -->
        <template v-if="item.children && item.children.length>0">
          <!--2 v-if -->
          <el-submenu :index="item.id">
            <template slot="title"> {{item.typename}}</template>
            <template v-for="item in item.children">
              <!--3 v-for -->
              <el-menu-item :index="'/channel/'+item.id">{{item.typename}}</el-menu-item>
            </template>
            <!--over 3 v-for -->
          </el-submenu>
        </template>
        <!--over 2 v-if -->
        <template v-else>
          <el-menu-item :index="'/channel/'+item.id">{{item.typename}}</el-menu-item>
        </template>
      </template>
      <!--over 2 v-for -->
    </el-submenu>
  </template>
  <!--over 1 v-if -->
  <template v-else>
    <el-menu-item :index="'/channel/'+item.id">{{item.typename}}</el-menu-item>
  </template>
</template>
<!--over 1 v-for -->

4、组件化

为方便后续增加修改,我们把这个弄成组件传参!

<template>
  <div>
    <!-- 1 v-for -->
    <template v-for="item in data">
      <!--1 v-if -->
      <template v-if="item.children && item.children.length>0">

        <el-submenu :index="item.id"
                    :key="item.id">
          <template slot="title"> {{item.typename}}</template>
          <template v-for="item in item.children">
            <template v-if="item.children && item.children.length>0">
              <!--2 v-if -->
              <el-submenu :index="item.id"
                          :key="item.id">
                <template slot="title"> {{item.typename}}</template>
                <template v-for="item in item.children">
                  <!--3 v-for -->
                  <el-menu-item :index="'/channel/'+item.id">{{item.typename}}</el-menu-item>
                </template>
                <!--over 3 v-for -->
              </el-submenu>
            </template>
            <!--over 2 v-if -->
            <template v-else>
              <el-menu-item :index="'/channel/'+item.id">{{item.typename}}</el-menu-item>
            </template>
          </template>
          <!--over 2 v-for -->
        </el-submenu>
      </template>
      <!--over 1 v-if -->
      <template v-else>
        <el-menu-item :index="'/channel/'+item.id">{{item.typename}}</el-menu-item>
      </template>
    </template>
    <!--over 1 v-for -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: []
    }
  },
  props: {
    contents: Array
  },
  mounted () {
    this.data = this.contents
    console.log(this.data)
  }
}
</script>

<style>
</style>

然后父组件调用

import elmenu from '../elmenu.vue'
export default {
components: {
    elmenu
  },

}


相关内容

发表评论

验证码:
点击我更换图片

最新评论