Element ui侧边导航栏
- 一、Vue使用Element ui
- 1、npm安装
- 2、main.js 引入 Element
- 3、拷贝导航组件
- 二、样式调整
- 1、导航栏宽度
- 2、导航栏高度
- 3、默认颜色设置
- 4、el-submenu样式设置
- 5、.el-menu-item样式设置
- 三、数据
- 1、导航标题
- 2、vue页面引入数据
- 3、循环生成导航栏
- 4、点击跳转路由
一、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" }
]
}
];
vue_163">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",
});
}
});
}
},
},