实现思路：准备两份aside侧边栏，借助display和媒体查询实现响应式。
以下是完整代码：
<template><el-container><el-header>头部</el-header><el-container><!-- 准备两份aside侧边栏 --><!-- 利用isCollapse动态控制侧边栏的宽度 --><el-aside :width="isCollapse ? '64px' : '200px'" class="show"><!-- 切换侧边栏的显示与隐藏效果 --><div class="toggle" @click="toggleCollapse">|||</div><!-- collapse: 是否水平折叠收起菜单 --><!-- collapse-transition：开启折叠动画 --><el-menu :collapse="isCollapse" :collapse-transition="false" default-active="2" class="el-menu-vertical-demo" @open="handleOpen"@close="handleClose" background-color="#333744" text-color="#fff" active-text-color="#ffd04b"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item index="1-4">选项1</el-menu-item></el-submenu></el-menu></el-aside><!-- 第二份aside侧边栏 --><!-- 侧边栏宽度取值与第一份相反 --><el-aside :width="isCollapse ? '200px' : '64px'" class="hide"><!-- 绑定相同的事件 --><div class="toggle" @click="toggleCollapse">|||</div><!-- 这里collapse取值相反 --><!-- collapse-transition：开启折叠动画 --><el-menu :collapse="!isCollapse" :collapse-transition="false" default-active="2" class="el-menu-vertical-demo" @open="handleOpen"@close="handleClose" background-color="#333744" text-color="#fff" active-text-color="#ffd04b"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item index="1-4">选项1</el-menu-item></el-submenu></el-menu></el-aside><el-main>主体</el-main></el-container></el-container></template><script>export default {name: 'App',data () {return {// 控制侧边栏的显示与隐藏isCollapse: false // 默认显示侧边栏}},methods: {// 控制侧边栏的显示与隐藏toggleCollapse () {this.isCollapse = !this.isCollapse}}}</script><style lang="less">html,body,.el-container {margin: 0;height: 100%;}.el-container {.el-header {padding: 0;background-color: #373d41;color: #fff;}.el-aside {background-color: #333744;// 默认只显示一份aside侧边栏&.show {display: block;}&.hide {display: none;}// 媒体查询，实现响应式@media (max-width: 992px) {// 取值与上面相反即可&.show {display: none;}// 取值与上面相反即可&.hide {display: block;}}.toggle {letter-spacing: 0.2em;color: #fff;text-align: center;line-height: 24px;background-color: #4a5064;cursor: pointer;}.el-menu {border-right: none;}}.el-main {background-color: #eaedf1;}}</style>
效果如下：
注：媒体查询设置的边界值是992px，小于992px折叠，大于992px展开。
源码地址：elementUI侧边栏响应式布局: elementUI侧边栏响应式布局
