项目左侧导航自动获取高度
<el-row
class="tac"
:style="containerHeight"
>
</el-row>
export default {
name: "LeftNav",
data () {
return {
number: 100,
circleUrl: "../assets/img/tx.png",
containerHeight: {
height: ""
}
}
},
created () {
//动态调整左侧菜单栏高度
var docHeight = document.documentElement.clientHeight;
this.containerHeight.height = docHeight + "px";
}
}
效果图如下:
实现对element-icon在循环时如何使用
Vue代码
<el-menu
text-color="#eee"
background-color="#2f4056"
default-active="1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
router
>
<el-sub-menu
v-for="item in listMenu"
:key="item.index"
:index="item.index"
:ref="item"
>
<template #title>
<el-icon>
<component :is="item.icon" />
</el-icon>
<span>{{item.tabName}}</span>
</template>
<el-menu-item-group
v-for="i in item.children"
:key="i.key">
<el-menu-item
:index="i.key"
:route="i.router"
@click="selectMenu(i)"
>{{i.title}}</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
</el-menu>
listMenu: [{
index: 1, tabName: "学生管理", icon: "UserFilled", children: [
{
key: '1-1',
router: "stu_info",
title: '学生信息'
},
{
key: '1-2',
router: "stu_score",
title: '学生成绩'
},
],
}, {
index: 2, tabName: "老师管理", icon: "Female", children: [
{
key: '2-1',
router: "teacher_info",
title: '老师信息'
},
{
key: '2-2',
router: "teacher_dis",
title: '课程分配'
},
],
}, {
index: 3, tabName: "课程管理", icon: "Edit", children: [
{
key: '3-1',
router: "course_info",
title: '课程信息'
},
{
key: '3-2',
router: "course_dis",
title: '课程分配'
},
],
}, {
index: 4, tabName: "系统管理", icon: "IconMenu", children: [
{
key: '4-1',
router: "user_info",
title: '用户信息'
},
{
key: '4-2',
router: "log_info",
title: '日志管理'
}, {
key: '4-3',
router: "sys_info",
title: '系统通告'
}
],
}]