Vue 使用element写收缩菜单

<el-container style="width: 100%;height: 89%;margin: 0">
        <!--收缩菜单-->
          <el-menu class="aside_menu" :collapse="isCollapse" default-active=“this.$router.path” router :unique-opened="true"
                   text-color="#EEEFEF" background-color="transparent">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-data"></i>
                <span slot="title">测点管理</span>
              </template>
              <el-menu-item index="/station0">测点信息管理</el-menu-item>
              <el-menu-item index="/station1">测点信息及控制</el-menu-item>
              <el-menu-item index="/station2">测点参数管理</el-menu-item>
              <el-menu-item index="/station3">测点管理</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-help"></i>
                <span slot="title">统计分析</span>
              </template>
              <el-menu-item index="/Statistics1">历史数据</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-platform"></i>
                <span slot="title">实时数据</span>
              </template>
              <el-menu-item index="/data1">实时数据</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">系统配置</span>
              </template>
              <el-menu-item index="/system1">用户管理</el-menu-item>
            </el-submenu>
          </el-menu>
        <div class="aside_div">
          <el-button class="aside_btn" @click="CLICKS()"></el-button></div>
        <el-main class="main">
          <router-view/>
        </el-main>
      </el-container>

asidewidth自行更改打开关闭的大小

export default {
  data() {
    return {
      asidewidth:'5%',
      isCollapse: true,  //水平折叠收起菜单
      i:0
    };
  },
 methods: {
    // 菜单收缩按钮
    CLICKS(){
      this.i+=1
      if(this.i % 2 === 1){   //奇数打开
        this.asidewidth="17%"
        this.isCollapse=false
      }
      else {
        this.asidewidth="5%"
        this.isCollapse=true
      }
    }
  }

/*收缩菜单*/
.aside_menu{
  box-sizing: border-box;
  border-top:2px solid rgb(43,115,179);
}
.aside_menu:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.aside_menu[data-v-90a7b406]{
  border-right: none;
}
.aside_div{
  position: relative;
  width: 12px;
  background-image: url("../../assets/main2-aside2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.aside_btn{
  position: absolute;
  width: 12px;
  height: 55px;
  padding: 0;
  top: 52%;
  background-color: transparent;
  border: none;
}