1重构：src\components\AdminLayoutComponen.vue(el-menu刷新保持当前菜单选项)
<template>
<el-container>
<!-- 侧边栏 ，"<div class="aside">标签可被删除，为了下拉条控件样式保存了该标签"-->
<div class="aside">
<el-aside width="200px">
<!--必须包含有："el-menu"标签，否则左侧菜单栏的高度不能达到100% -->
<el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
text-color="#fff" :default-active="activeIndex" router>
<template v-for="(item, index) in menuList" :key="index">
<el-sub-menu v-if="item.children && item.children.length" :index="item.menuId">
<template #title>
<el-icon>
<component :is="item.icon"></component>
</el-icon>
<span>{{item.name}}</span>
</template>
<el-menu-item v-for="(children, index) in item.children" :key="index"
:route="{path:children.path}" :index="children.menuId">
{{children.name}}
</el-menu-item>
</el-sub-menu>
<el-menu-item v-else :route="{path:item.path}" :index="item.menuId">
<el-icon>
<component :is="item.icon"></component>
</el-icon>
<span>{{item.name}}</span>
</el-menu-item>
</template>
</el-menu>
</el-aside>
</div>
<el-container>
<el-header>Header</el-header>
<el-main>
<router-view></router-view>
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</template>
<script>
import router from '../router/index.js'
export default {
data() {
return {
//对所有后台管理路由实例进行存储，为左侧菜单栏的渲染显示提供数据支撑。
menuList: {},
// el-menu刷新保持当前菜单选项。
activeIndex: "1",
};
},
methods: {
async getAllMenu() {
this.menuList = this.$router.options.routes.find(route => route.path === "/").children;
},
// el-menu刷新保持当前菜单选项。
async setCurrentRoute() {
let adminRouteList = this.$router.options.routes.find(route => route.path === "/").children
adminRouteList.forEach((item) => {
if (item.name === this.$route.name)
this.activeIndex = item.menuId;
if (item.children) {
if (item.children.find(route => route.name === this.$route.name) != null)
this.activeIndex = item.children.find(route => route.name == this.$route.name).menuId;
}
});
//console.log(this.activeIndex);
},
},
mounted() {
this.getAllMenu();
console.log(router.options.routes.find(route => route.path === "/"));
console.log(JSON.stringify(router.options.routes.find(route => route.path === "/")));
//以“JSON”编码格式把所有后台管理路由实例进行全局存储(Vuex=store)。
if (window.localStorage.router != null)
window.localStorage.router = null;
console.log(window.localStorage.router);
window.localStorage.router = JSON.stringify(router.options.routes.find(route => route.path === "/"))
console.log(window.localStorage.router);
},
// 检测路由变化，el-menu刷新保持当前菜单选项。
watch: {
$route() {
this.setCurrentRoute();
}
},
created() {
//el-menu刷新保持当前菜单选项。
this.setCurrentRoute();
},
}
</script>
<style scoped lang="scss">
.aside {
width: 200px;
overflow: hidden;
background-color: #545c64;
}
.el-aside {
height: 100%;
//overflow-x: hidden;
//overflow-y: scroll;
}
.el-header {
background-color: #ff0000;
color: #FFFFFF;
}
.el-main {
height: 90vh; //必须定义："height"为：90vh，否则主区域的高度不能达到100%；如果大于90vh整页的调度将超过100%。
}
.el-footer {
background-color: #0000ff;
color: #FFFFFF;
}
//必须定义：".el-menu"样式，否则左侧菜单栏的高度不能达到100%
.el-menu {
height: 90vh; //必须定义："height"为：90vh，否则左侧菜单栏的高度不能达到100%；如果大于90vh整页的调度将超过100%。
}
.el-menu .el-menu-item.is-active {
background-color: #000000;
font-weight: 900;
font-size: 120%;
}
</style>
2 重构src\views\Users\ RoleView.vue
<template>
<el-table :data="roleAllList" style="width: 100%" :row-style="{height:'30px'}">
<el-table-column type="selection" width="50px" />
<el-table-column property="name" label="名称" />
<el-table-column property="isActive" label="启用？" />
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="primary" @click="handleEdit(scope.$index, scope.row)" size="large" style="margin-right: 10px;">编 辑</el-button>
<el-button type="danger" @click="handleDelete(scope.$index, scope.row)" size="large">删 除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
import axios from 'axios'
export default ({
data() {
return {
roleAllList: [],
};
},
methods: {
//获取“角色”实体的所有实例。
async getRoleList() {
let res = await axios.get('https://localhost:7043/Role/GetRoleList');
console.log(res.data);
this.roleAllList = res.data;
},
},
mounted() {
this.getRoleList();
}
});
</script>
<style scoped lang="scss">
// 修改表头样式。
:deep(.el-table__header thead th) {
background-color: #000000;
color: #ffd04b;
font-size: 150%;
font-weight: 700;
text-align: center;
}
//修改复选框控件样式。
:deep(.el-checkbox) {
display: flex;
align-items: center;
width: 25px;
height: 25px;
//修改选中框的大小
.el-checkbox__inner {
width: 20px;
height: 20px;
border: #409EFF solid 2px;
//修改选中框中的对勾的大小和位置
&::after {
// 对号
border: 4px solid #FFFFFF;
// 不覆盖下面的 会 导致对号变形
box-sizing: content-box;
content: "";
border-left: 0;
border-top: 0;
height: 15px;
position: absolute;
top: -3px;
}
}
//修改点击文字颜色不变
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #333333;
}
.el-checkbox__label {
line-height: 25px;
//padding-left: 8px;
}
}
//表格隔行变换颜色。
:deep(.el-table__body tbody tr:nth-child(odd)) {
background-color: #FFFFFF;
font-size: 120%;
font-weight: 700;
}
:deep(.el-table__body tbody tr:nth-child(even) td) {
background-color: #CCFFFF;
font-size: 120%;
font-weight: 700;
}
</style>
对以上功能更为具体实现和注释见221224_003shopvue(el-menu刷新保持当前菜单选项与角色页面)。
