实现侧边栏的折叠与展开效果

展示效果

代码：

html：

动态绑定 : toggleCollapse 点击事件 改变宽度

collapse-transition: 是否开启折叠动画

collapse：是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）

<el-container>
      <!--侧边栏-->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!--侧边栏菜单区域-->
        <el-menu :collapse="isCollapse" :collapse-transition="false" background-color="#333744" text-color="#fff" active-text-color="#409EFF"> 
        </el-menu>
      </el-aside>
</el-container>

script:

<script>
export default {
  name: "Home",
  data() {
    return {
      // 左侧菜单数据
      menulist: [],
      // 是否折叠
      isCollapse: false
    }
  },
    // 点击按钮切换菜单的折叠和展开
    toggleCollapse() {
      this.isCollapse = ! this.isCollapse;
    }
  }
}
</script>