element-ui中el-menu菜单实现与封装

el-menu菜单实现思路：

1 el-submenu    --（有子菜单出现时采用该组件）

2 el-menu-item  --（无子菜单出现时采用该组件）

所以大概结构我们将是这样：

        

          :index="item.catalogCode"

          v-if="item.childCatalogs&&item.childCatalogs.length>0"

          :key="item.catalogCode"

        >

         xxxxx

       

     

          v-else

          :index="item.catalogCode"

          :key="item.catalogCode"

        >

       xxxxx

     

对于el-submenu子菜单而言，其子菜单可能还有子菜单。所以我们得采用递归组件，递归的内容结构无非还是这样

 

          :index="item.catalogCode"

          v-if="item.childCatalogs&&item.childCatalogs.length>0"

          :key="item.catalogCode"

        >

         xxxxx

       

     

          v-else

          :index="item.catalogCode"

          :key="item.catalogCode"

        >

       xxxxx

     

所以我们这里开始做封装：

最外层结构组件 ，我们命名为sidebar，而对于子组件还有内容的情我们再把其抽出来单独封装成一个组件：NavBar

-----------------------SideBar-----------------------

      :background-color="F1F3F4"

      :collapse-transition="false"

      class="el-menu-vertical-demo"

      :collapse="!isCollapse"

    >

      

        

          :index="item.catalogCode"

          v-if="item.childCatalogs&&item.childCatalogs.length>0"

          :key="item.catalogCode"

        >

          

            

            {{item.catalogName}}

          

          

        

        

          v-else

          :index="item.catalogCode"

          :key="item.catalogCode"

        >

          

          

            {{item.catalogName}}

          

        

      

    

--------------NavBar-------------------------------------

  

    

      

        :index="item.catalogCode"

        v-if="item.childCatalogs&&item.childCatalogs.length>0"

        :key="item.catalogCode"

      >

        

          

          {{item.catalogName}}

        

        

      

      

        v-else

        :index="item.catalogCode"

        :key="item.catalogCode"

      >

        

          

            

            {{item.catalogName}}

          

        

      

    

  

export default {

  name: "navMenu",

  components: {},

  props: {

    menusData: {

      type: Array,

      default: () => {

        return []

      }

    }

  },

  setup() {

    return {

    };

  },

};

我们在navbar中通过props传参即可实现。

数据格式如下：

1. catalogCode: "001"
2. catalogName: "修改名称"
3. childCatalogs: [{catalogCode: "008", catalogName: "明星", refImgNum: 1},…]
   1. 0: {catalogCode: "008", catalogName: "明星", refImgNum: 1}
      1. catalogCode: "008"
      2. catalogName: "明星"
      3. refImgNum: 1