Vue element-io 折叠侧边菜单问题

Question

我正在尝试使用 Element UI 库实现一个简单的管理面板。

我的问题是，当侧菜单隐藏时，内容不会占据100％，解决这个问题的唯一方法是禁用菜单动画并使用CSS强制其宽度在折叠时变小：

aside.menu-collapsed {
    width: 64px !important;
}

我的布局如下所示：

模板：

<template>
    <el-container>
        <el-aside v-bind:class="[isCollapse ? 'menu-collapsed' : 'menu-expanded']">
            <el-menu :router="true"
                     :default-active="$route.path"
                     :collapse="isCollapse"
                     :collapse-transition="true"
                     class="el-menu-vertical"
            >

                <template v-for="rule in routes">
                    :
                    :
                </template>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header height="100">
                <span v-on:click="collapseSidebar()">
                    <i class="fas fa-bars"></i>
                </span>
            </el-header>

            <el-main>
                <router-view></router-view>
            </el-main>

        </el-container>
    </el-container>
</template>

CSS：

<style>
.el-menu-vertical {
    height: 100vh;
}
.el-menu-vertical:not(.el-menu--collapse) {
    width: 100%;
}

.el-header {
    background-color: #b4bbc1;
    color: #333;
    line-height: 56px;
}
</style>

知道如何在折叠侧边菜单时使内容宽度变大吗？

Answer 1

这就是我所做的

<el-aside :span="4"  v-bind:style='{"width": (isCollapse? "64px" : "300px" )}'>

。 .

<span @click="isCollapse = !isCollapse"><i class="fas fa-bars"></i></span>