vue2+element-ui,el-aside侧边栏容器收缩与展开

在Vue 2和Element UI中，可以使用<el-aside>组件来创建侧边栏，并通过v-model绑定一个变量来控制侧边栏的展开和收缩。以下是一个简单的例子：

<template>
  <el-container :class="{ 'hide-aside': !isAsideVisible }">
    <el-aside width="200px">
      <!-- 侧边栏内容 -->
      <el-button @click="toggleAside">收缩/展开侧边栏</el-button>
    </el-aside>
    <el-main>
      <!-- 主内容区 -->
    </el-main>
  </el-container>
</template>
 
<script>
export default {
  data() {
    return {
      isAsideVisible: true // 控制侧边栏的展开和收缩
    };
  },
  methods: {
    toggleAside() {
      this.isAsideVisible = !this.isAsideVisible;
    }
  }
};
</script>
 
<style>
.hide-aside .el-aside {
  display: none;
}
</style>

在这个例子中，isAsideVisible是一个数据属性，用于控制侧边栏的显示与隐藏。通过点击按钮调用toggleAside方法来切换isAsideVisible的值，从而实现侧边栏的展开和收缩。CSS样式.hide-aside用于在侧边栏收缩时隐藏它。