1.elementui官网
demo源码
https://download.csdn.net/download/lucky_fang/65433243
框架效果图
登录页
登陆成功后，跳转首页
会员管理
新增会员，含头像上传
点击会员行记录，查看详情
批量删除
2.首先创建项目，在另外一篇文章已经介绍过：
vue+element简单实现商城网站首页，模仿小米电商商城_lucky_fang的博客-CSDN博客
3.项目结构截图
4.page/index/index.vue，通过vue自定义组件思想实现，keep-alive保持页面不刷新，可通过路由配置指定设置meta: {keepAlive: true}即可
<template>
<div style="width: 100%;height: 100%;">
<div style="display: flex;width: 100%;height: 100%;overflow: hidden;">
<left ref="left"></left>
<div :style="'width: calc(100% - '+(isCollapse?'65px':'200px')+');background-color: #f0f2f5;'">
<top @changeCollapse="changeCollapse"></top>
<tags/>
<!-- 页面展示容器 -->
<keep-alive>
<router-view class="vue-view" v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view class="vue-view" v-if="!$route.meta.keepAlive"/>
</div>
</div>
</div>
</template>
<script>
import top from "../top/index.vue";
import left from "../left/index";
import tags from "./tags";
export default {
components: {
top,
left,
tags
},
name: "index",
data() {
return {
loading: true,
isCollapse: false,
activeIndex: '1',
activeIndex2: '1'
};
},
mounted() {
},
methods: {
changeCollapse(){
console.info(this.isCollapse);
this.isCollapse = !this.isCollapse;
this.$refs.left.changeCollapse();
}
}
};
</script>
<style>
.vue-view{
padding: 0 10px 0 10px!important;
width: 100%!important;
-webkit-box-sizing: border-box!important;
box-sizing: border-box!important;
background-color: #f0f2f5!important;
}
</style>
5.左侧菜单，page/left/index.vue
<template>
<div class="avue-sidebar" :style="'height:100%;background-color: #20222a;width:'+(isCollapse?'65px;':'201px;')">
<!-- logo -->
<div class="logo">
<img src="../../../public/img/logo.png" />
<div class="title" v-if="!isCollapse">暴富集团</div>
</div>
<!-- 左侧菜单 -->
<el-menu
unique-opened
:default-active="active"
class="el-menu-vertical-demo"
background-color="#20222a"
text-color="#fff"
:collapse="isCollapse"
style="height: calc(100% - 60px);overflow: auto;"
active-text-color="#ffd04b">
<router-link to="/home/index">
<el-menu-item index="/home/index">
<i class="el-icon-menu"></i>
<span slot="title">首页</span>
</el-menu-item>
</router-link>
<el-submenu index="user">
<template slot="title">
<i class="el-icon-user-solid"></i>
<span slot="title">用户管理</span>
</template>
<el-menu-item-group>
<router-link to="/user/index">
<el-menu-item index="/user/index"><i class="el-icon-menu"></i>会员管理</el-menu-item>
</router-link>
<router-link to="/user/account">
<el-menu-item index="/user/account"><i class="el-icon-tickets"></i>账户管理</el-menu-item>
</router-link>
<router-link to="/user/fund">
<el-menu-item index="/user/fund"><i class="el-icon-orange"></i>资金管理</el-menu-item>
</router-link>
</el-menu-item-group>
</el-submenu>
<router-link to="/business/index">
<el-menu-item index="/business/index">
<i class="el-icon-help"></i>
<span slot="title">商家管理</span>
</el-menu-item>
</router-link>
<router-link to="/product/index">
<el-menu-item index="/product/index">
<i class="el-icon-menu"></i>
<span slot="title">商品管理</span>
</el-menu-item>
</router-link>
<el-menu-item index="4">
<i class="el-icon-s-grid"></i>
<span slot="title">分类管理</span>
</el-menu-item>
<el-menu-item index="6">
<i class="el-icon-coin"></i>
<span slot="title">文件管理</span>
</el-menu-item>
<el-menu-item index="7">
<i class="el-icon-notebook-2"></i>
<span slot="title">日志管理</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: "sidebarItem",
data() {
return {
isCollapse: false,
active: '/home/index',
};
},
created() {
},
mounted() {
let that = this;
setInterval(function(){//定位当前菜单
that.active = that.$router.currentRoute.path;
},500);
},
computed: {
nowTagValue() {
return this.$router.path;
}
},
methods: {
changeCollapse(){
this.isCollapse = !this.isCollapse;
this.$emit('changeCollapse');
},
vaildActive(path) {
// if (this.validIsOpen(item)) {
// return false;
// }
return this.nowTagValue === path;
},
}
};
</script>
<style>
.el-menu{
border-right: none!important;
}
.is-active{
}
.avue-sidebar{
padding-top: 0!important;
}
</style>
6.顶部菜单，page/top/index.vue
<template>
<div class="top-box">
<i v-if="!isCollapse" class="el-icon-s-fold top-box-i" @click="changeCollapse"></i>
<i v-if="isCollapse" class="el-icon-s-unfold top-box-i" @click="changeCollapse"></i>
<el-menu
:default-active="active"
class="el-menu-demo"
mode="horizontal"
background-color="#FFFFFF"
text-color="#000000"
active-text-color="#ffd04b">
<el-menu-item index="/test/index">
<router-link to="/test/index">处理中心</router-link>
</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3">消息中心</el-menu-item>
<el-menu-item index="4">订单管理</el-menu-item>
</el-menu>
<div style="flex: 1;margin-right: 10px;">
<div style="display: flex;float: right;">
<img src="../../../public/img/default_face.png" style="margin-top: 15px;width: 32px;height: 32px;">
<span style="max-width: 100px;overflow: hidden;text-overflow: ellipsis;line-height: 60px;color: #000000;margin: 0 20px 0 5px;">管理员</span>
<el-tooltip
effect="dark"
content="退出系统"
placement="bottom">
<div>
<i class="el-icon-switch-button" style="color: #000000;font-size: 18px;margin-top: 20px;"
@click="logout"></i>
</div>
</el-tooltip>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isCollapse: false,
active: '',
};
},
mounted() {
let that = this;
setInterval(function(){//定位当前菜单
that.active = that.$router.currentRoute.path;
},500);
},
methods: {
changeCollapse(){
this.isCollapse = !this.isCollapse;
this.$emit('changeCollapse');
},
logout() {
this.$confirm('退出系统, 是否继续?', '', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning"
}).then(() => {
//退出操作，todo
this.$router.push({path: '/login'});
});
},
}
};
</script>
<style>
.top-box{
height: 60px;
display: flex;
background-color: #FFFFFF;
border-bottom: 1px solid #eeeeee;
}
.top-box-i{
width: 32px;
height: 32px;
font-size: 24px;
margin: 16px 10px 0 15px;
color: #000000;
}
.el-menu--horizontal .el-menu--popup .el-submenu__title{
color: #FFFFFF!important;
}
</style>
7.permission.js，路由拦截和历史导航栏添加
import {getStore,setStore} from "@/util/store.js"
store.js封装了一些页面缓存通用的方法，可把一些关键信息调用以下方法存到页面缓存，内容字符串对象等都可以。
setStore({name: "your-key", content: 内容});
历史导航栏
源码
版权声明：本文为lucky_fang原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。