Element ui侧边导航栏的使用笔记

一、Vue使用Element ui

1、npm安装

npm i element-ui -S

2、main.js 引入 Element

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

3、拷贝导航组件

        <el-row>
          <el-col>
            <div class="tachead">
               <img src="static/images/leftico.png" alt="">
               <span>菜单管理</span>
            </div>
            <el-menu
              default-active="1-1"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#f0f9fd"
              text-color="black"
              active-text-color="white"
            >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>管理信息</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1">首页</el-menu-item>
                  <el-menu-item index="1-2">用户管理</el-menu-item>
                  <el-menu-item index="1-3">退出</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>

二、样式调整

1、导航栏宽度

<el-col :span="12"> 

官网用的是span比例，我改为1太窄，2太宽，所以删除，自己定个宽度。

2、导航栏高度

(1)、整个页面index为上下两部分，最上面部分为header，下面section又分左边导航el-row、右边内容显示main，header固定高度，导航占满剩余页面高度。
(2)、整个页面设置成flex，方向column，section设置flex: 1，el-row设置height: 100%;同时设置#app{height: 100%;}和index{height: 100%;}

3、默认颜色设置

     <el-menu
        default-active="1-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#f0f9fd"  //导航栏背景色
        text-color="black"  //字体颜色
        active-text-color="white"  //选中时字体颜色
      >

4、el-submenu样式设置

官网没有提供属性设置el-submenu样式，我觉得el-submenu高度太高，需要降低高度。去源文件中修改el-submenu高度。源文件地址：./node_modules/element-ui/lib/theme-chalk/index.css。

el-menu-item,.el-submenu__title{height:40px;line-height:40px;position:relative;-webkit-box-sizing:border-box;white-space:nowrap;list-style:none}

修改height和line-height:40px;
这里也可以修改el-submenu字体和颜色等

5、.el-menu-item样式设置

(1)、和el-submenu空隙太大

.el-menu-item-group {
                margin-top: -13px;

(2)、字体大小、宽度、高度、选中时背景色

    .el-menu-item-group {
      margin-top: -13px;
      .el-menu-item {
        font-size: 12px;
        min-width: 100%;
        height: 35px;
        line-height: 35px;
          }                        
      .el-menu-item.is-active {
        background-color: @small-blue !important;
      }
    }

三、数据

1、导航标题

export let menudata = [
  {
    menufirst: "管理信息",
    menusecond: [
      { title: "首页", url: "/" },
      { title: "用户管理", url: "/user" },
      { title: "退出", url: "/logout" }
    ]
  },
  {
    menufirst: "产品管理",
    menusecond: [
      { title: "产品分类列表", url: "/category/show" },
      { title: "产品列表", url: "/product/show" }
    ]
  },
  {
    menufirst: "采购管理",
    menusecond: [
      { title: "供应商管理", url: "/purchase/vender" },
      { title: "新添采购单", url: "/purchase/pomain/add" },
      { title: "采购单了结", url: "/purchase/pomain/end" },
      { title: "采购单查询", url: "/purchase/pomain/queryItem" }
    ]
  },
  {
    menufirst: "仓管管理",
    menusecond: [
      { title: "入库登记", url: "/stock/instock" },
      { title: "出库登记", url: "/stock/outstockr" },
      { title: "库存查询", url: "/stock/query" },
      { title: "库存盘点", url: "/stock/checkstock" }
    ]
  },
  {
    menufirst: "销售管理",
    menusecond: [
      { title: "客户管理", url: "/customer" },
      { title: "新添销售单", url: "/sell/somain/add" },
      { title: "销售单了结", url: "/sell/somain/end" },
      { title: "销售单查询", url: "/sell/somain/query" }
    ]
  },
  {
    menufirst: "财务收支",
    menusecond: [
      { title: "收款登记", url: "/finance/receipt" },
      { title: "付款登记", url: "/finance/pay" },
      { title: "收支查询", url: "/finance/query" }
    ]
  },
  {
    menufirst: "月度报表",
    menusecond: [
      { title: "月度采购报表", url: "/report/pomain/main" },
      { title: "月度销售报表", url: "/report/somain/main" },
      { title: "月度出库报表", url: "/report/outstock/main" },
      { title: "月度入库报表", url: "/report/instock/main" },
      { title: "月度库存报表", url: "/report/stock/main" },
      { title: "月度收支报表", url: "/report/payment/main" }
    ]
  }
];

2、vue页面引入数据

<script>
import { systime } from "../api/index.js"; // 引入方法
import { menudata } from '../comdata/indexdata'
export default {
  name: "index",
  data() {
    return {
      date: new Date(),
      menudata,
    };
  },

3、循环生成导航栏

<el-submenu v-for="(item,index) in menudata" :key="index" :index="index + ''">
   <template slot="title">
     <i class="el-icon-postcard"></i>
     <span>{{ item.menufirst }}</span>
   </template>
   <el-menu-item-group v-if="item.menusecond&&item.menusecond.length>0">
     <el-menu-item v-for="(menuse,menusei) in item.menusecond" :key="menusei" :index="menuse.url" @click="routhTo(menuse.url)">
          <i class="el-icon-caret-right"></i>
           <span>{{ menuse.title }}</span>
     </el-menu-item>

   </el-menu-item-group>
</el-submenu>

4、点击跳转路由

 methods: {
    // 导航栏跳转
    routhTo(value) {
      this.$router.push(value);
      if (value == "/login") {
        // 退出登录
        getLogout().then((res) => {
          if (res.code == 2) {
            this.$message({
              message: res.message,
              type: "success",
            });
          } else {
            this.$message({
              message: res.message,
              type: "error",
            });
          }
        });
      }
    },
  },