Javascript Vue元素io折叠侧菜单问题

我尝试使用库实现一个简单的管理面板

我的问题是当侧菜单被隐藏时，内容不会占据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>

<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>

:
:

Css:

<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>

<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>

.el菜单垂直{
高度：100vh；
}
.el菜单垂直：非（.el菜单--折叠）{
宽度：100%；
}
.el标题{
背景色：#b4bbc1；
颜色：#333；
线高：56px；
}

你知道如何在折叠侧菜单时增加内容宽度吗？

我就是这么做的

.