el-aside 侧边栏折叠效果

<el-aside :width="isCollapse ? '60px' : '200px'">

<div class="toggle-button" @click="toggleCollapse">

<i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'">

</i>

</div>

<el-menu

router

:default-active="this.$" // 当前激活菜单的 index

:collapse="isCollapse" // 是否折叠

:collapse-transition="false" // 是否开启折叠动画

active-text-color="#000" // 当前激活菜单的文字颜色

background-color="#fff" // 菜单的背景颜色

text-color="#909399" // 菜单的文字颜色

>

<el-menu-item index="/itSystem">

<i class="el-icon-house"></i>

<span slot="title">菜单01</span>

</el-menu-item>

<el-menu-item index="/itHost">

<i class="el-icon-setting"></i>

<span slot="title">菜单02</span>

</el-menu-item>

<el-menu-item index="/itSoftware">

<i class="el-icon-s-operation"></i>

<span slot="title">菜单03</span>

</el-menu-item>

<el-menu-item index="/itDatabase">

<i class="el-icon-s-data"></i>

<span slot="title">菜单04</span>

</el-menu-item>

</el-menu>

</el-aside>

data() {

return {

isCollapse: false, //是否折叠

}

}

methods: {

// 点击按钮，切换菜单的折叠与展开

toggleCollapse() {

this.isCollapse = !this.isCollapse;

},

}

<style lang="scss" scoped>

.el-aside {

// 去除底部滚动条

overflow-x: hidden;

min-height: calc(100vh - 60px);

z-index: 999;

// 去除侧边栏滚动条

scrollbar-width: none;

&::-webkit-scrollbar {

display: none;

}

}

.toggle-button {

font-size: 20px;

cursor: pointer;

text-align: center;

}

</style>