封装elementui 多层导航

注意：

数据需要通过父页面传递进来，在模板中会造成数据溢出

模板需要有name属性，调用模板的父页面的组件名称和模板name需一致，才能实现递归。

//menu.vue;
<template>
    <div>
      <template v-for="list in this.menuList" >  //循环数据；数据menuList通过props传递
        <el-submenu index="1" v-if="list.children.length>0" :key="list.resourceId" :index="list.resourceName"  > 
          <template slot="title"  style="padding-left:10px" >
            <i class="el-icon-menu"></i>
            <span slot="title">{{ list.resourceName}}</span>
          </template>
          <Menu :menuList="list.children"></Menu> //当有子集数据再次使用这个模板，:menuList通过props传递
        </el-submenu>
        <el-menu-item v-else :index="list.resourceName"  :key="list.resourceId" style="padding-left: 50px;">
          <span>{{list.resourceName}}</span>
        </el-menu-item>
      </template>
    </div>
</template>
<style>
  .el-menu--collapse  span,
  .el-menu--collapse  i.el-submenu__icon-arrow
  {
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
  }
</style>
<script>
    export default{
        name:'Menu',//模板名称
        data(){
            return {

            }
        },
        beforeMount(){
        },
        props:['menuList']

    }
</script>

2.父页面使用组件

//template部分
     <el-menu
               class="el-menu-vertical-demo"
               :collapse="isCollapse"
               background-color="rgb(73, 80, 96)" //背景颜色：此备注说明用，实际开发需要删除，否则报错
               text-color="rgba(255,255,255,0.7)" //字体颜色：此备注说明用，实际开发需要删除，否则报错
               unique-opened        //只打开一个菜单：此备注说明用，实际开发需要删除，否则报错
        >
        <Menu :menuList="this.menuList"></Menu>
      </el-menu>
//script部分 
 import Menu from './main-components/menu.vue'; //引进菜单模板
 import {menudata} from '../data/menu.js';     //菜单数据
 export default{
        data(){
            return {
              isCollapse:false,//菜单展开功能
              unCollapse:{
                width:'220px'
              },
              collapse:{
                width:'50px'
              },
              unCollapseMain:{
                paddingLeft:'220px'
              },
              collapseMain:{
                paddingLeft:'50px'
              },
              menuList:menudata.obj
            }
        },
        methods:{
          toggleClick(){//菜单展开功能
            this.isCollapse=!this.isCollapse;
          }
        },
        components:{
          Menu//使用菜单组件
        }
    }

作者：saintkl
链接：https://www.jianshu.com/p/e2493b3fd0d7
來源：简书

封装elementui 多层导航

猜你喜欢