您现在的位置是:首页 > 学无止境 >  心得笔记

element三级菜单栏自定义图标

admin2019-05-04 心得笔记 人已围观

简介vue-cli, element三级菜单栏自定义图标

Element 三级菜单 自定义图标 ,直接复制下面代码粘贴就ok
 
<template>
  <nav>
    <header class="nav_header">格子衬衫</header>
    <el-menu default-active="1" background-color="#20222a" text-color="#fff" active-text-color="#ffd04b" :style=" 'height:'+navState.windowHeight+'px' " class="nav_ul">
      <!-- 一级菜单 -->
      <template v-for="item in list" >
        <el-submenu v-if="item.children && item.children.length" :index="item.path" :key="item.path">
          <template slot="title"><i :class="item.icon"></i><span>{{item.name}}</span></template>

          <!-- 二级菜单 -->
          <template v-for="itemChild in item.children">

            <el-submenu v-if="itemChild.children && itemChild.children.length" :index="itemChild.path" :key="itemChild.path">
              <template slot="title"><i :class="itemChild.icon"></i><span>{{itemChild.name}}</span></template>

              <!-- 三级菜单 -->
              <el-menu-item v-for="itemChild_Child in itemChild.children" :index="itemChild_Child .path" :key="itemChild_Child.path">
                <i :class="itemChild_Child.icon"></i><span slot="title">{{itemChild_Child.name}}</span>
              </el-menu-item>

            </el-submenu>

            <el-menu-item v-else :index="itemChild.path" :key="itemChild.path"><i :class="itemChild.icon"></i><span slot="title">{{itemChild.name}}</span></el-menu-item>
          </template>
        </el-submenu>

        <!--  单一的模块  -->
        <el-menu-item v-else :index="item.path" :key="item.path"><i :class="item.icon"></i><span slot="title">{{item.name}}</span></el-menu-item>

      </template>

    </el-menu>
  </nav>
</template>



<script>
  export default {
    data() {
      return {
        list: [
          {
            path: "/1",
            name: "用户管理",
            icon:'el-icon-user-solid',
            children: [
              {
                path: "/1/1",
                name: "导航1-1",
                icon:'el-icon-menu',
                children: [
                  {
                    path: "/1/1/1",
                    name: "导航1-1-1",
                    icon:'el-icon-menu',
                  },
                  {
                    path: "/1/1/2",
                    name: "导航1-1-2",
                    icon:'el-icon-menu',
                  },
                  {
                    path: "/1/1/3",
                    name: "导航1-1-3",
                    icon:'el-icon-menu',
                  },
                  {
                    path: "/1/1/4",
                    name: "导航1-1-4",
                    icon:'el-icon-menu',
                  },
                  {
                    path: "/1/1/5",
                    name: "导航1-1-5",
                    icon:'el-icon-menu',
                  }
                ]
              },
              {
                path: "/1/2",
                name: "导航1-2",
                icon:'el-icon-menu',
              }
            ]
          },
          {
            path: "/2",
            name: "导航二",
            icon:'el-icon-menu'
          },
         
        ],
        navState:{
          windowHeight:0
        }
      };
    },
    mounted(){
      let that = this;

      // 监听页面 宽度改变
      that.navState.windowHeight =window.innerHeight -40;
      window.onresize = () =>{
        that.navState.windowHeight =window.innerHeight -40;
      }


    },
    methods: {

      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

<style scoped>
  .nav_header{
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .nav_ul{
    width: 100%;
  }

  .nav_ul {
    position: relative;
    overflow: hidden;
  }
  .nav_ul {
    position: absolute; left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  /* for Chrome */
  .nav_ul::-webkit-scrollbar {
    display: none;
  }

  /*   组件代码   */
.el-menu{
  border: none;
}
</style>
 

很赞哦!67

文章评论

      匿名评论
    • 评论
    人参与,条评论

站点信息

  • 建站时间:2018-12-23
  • 网站程序:帝国CMS7.5
  • 文章统计: 183
  • 文章评论:490条
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们