vue+elementUi做菜单栏

template部分

首先要清楚elementui的架构,el-menu是最外层,如果有下级列表,就用el-submenu,没有就用el-menu-item

在el-submenu中,template分发标题,el-menu-item-group作为下一级列表的集合。里面循环使用el-menu-item

当然,这里可以递归一直往下找,但是我这里只涉及到二级,所以只写到这就可以了。至于具体属性,去elementui官网上查吧

<div id="navigate-container">
  <div id="menu">
    <el-row class="tac">
      <el-col :span="24">
        <el-menu
                :default-active="onRoutes"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                uniqueOpened
                router
                @close="handleClose"
                background-color="#1b2c36"
                text-color="#fff"
                active-text-color="#ffd04b">
          <div v-for="item in navList">
            <el-submenu :index="item.path"  v-if="item.child && item.child.length" >
              <template slot="title">
                <i class="icon iconfont" :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <div v-for="(itemChild, indexChild) in item.child">
                  <el-menu-item :index="itemChild.path + '?name=' + itemChild.name + '&parent=' + item.name + '&first=' + item.child[0].path" >{{itemChild.name}}</el-menu-item>
                </div>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item v-else :index="item.path">{{ item.name }}</el-menu-item>
          </div>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</div>

js部分

这里我用onRoutes计算出当前的路由,然后确定当前哪个是激活状态。path是路径,也是唯一标识index。

  export default {
    computed: {
      onRoutes () {
        return this.$route.path
      }
    },
    data () {
      return {
        navList: [
          {
            name: '客户',
            icon: 'icon-friend',
            path: '/main/customer/',
            child: [
              {
                name: '客户审核',
                path: '/main/customer/CustomerCheck/'
              },
              {
                name: '客户管理',
                path: '/main/customer/CustomerManagement/'
              }
            ]
          },
          {
            name: '订单',
            icon: 'icon-dingdan',
            path: '/main/orders/',
            child: [
              {
                name: '订单导入',
                path: '/main/orders/orderImport/'
              },
              {
                name: '订单管理',
                path: '/main/orders/orderManagement/'
              },
              {
                name: '订单加单',
                path: '/main/orders/orderAdd/'
              },
              {
                name: '订单查询',
                path: '/main/orders/orderSearch/'
              },
              {
                name: '精确查询',
                path: '/main/orders/orderAccurate/'
              }
            ]
          },
          {
            name: '账单',
            icon: 'icon-zhangdan',
            path: '/main/bills',
            child: [
              {
                name: '客户账单',
                path: '/main/bills/BillsCustomer/'
              },
              {
                name: '线下开单账单',
                path: '/main/bills/BillsOffline/'
              },
              {
                name: '签收结算账单',
                path: '/main/bills/BillsSigned/'
              },
              {
                name: '重量结算账单',
                path: '/main/bills/BillsWeight/'
              },
              {
                name: '总计账单',
                path: '/main/bills/BillsStatistics/'
              },
              {
                name: '账单统计',
                path: '/main/bills/BillsTotal/'
              }
            ]
          }
        ]
      }
    },
    methods: {
      handleOpen (key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
        console.log(key, keyPath)
      }
    }
  }

随机浏览