element UI 动态设置菜单栏的折叠与展开

1、操作按钮

<el-container>
      <el-aside :width="isCollapse ? '64px' : '170px'">
        <div :class="toggleButton" @click="togleCollapse">
          <img src="../../assets/img/menu-toggle-line.png" style="top: 35%;position: relative;" />
        </div>
        <el-menu
          router
          unique-opened
          :default-active="$route.path"
          :collapse="isCollapse"
          :collapse-transition="false"
        >
          <el-menu-item :index="'/' + 'report/all'">
            <i class="el-icon-document"></i>
            <span slot="title">所有举报</span>
          </el-menu-item>
          <el-menu-item :index="'/' + 'report/weChart'">
            <i class="el-icon-menu"></i>
            <span slot="title">微信举报</span>
          </el-menu-item>
          <el-menu-item :index="'/' + 'report/net'">
            <i class="el-icon-document"></i>
            <span slot="title">网络举报</span>
          </el-menu-item>
          <el-menu-item :index="'/' + 'report/phone'">
            <i class="el-icon-setting"></i>
            <span slot="title">电话举报</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-setting"></i>
            <span slot="title">其他方式</span>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="el-icon-setting"></i>
            <span slot="title">电话咨询</span>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="el-icon-setting"></i>
            <span slot="title">草稿箱</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

　

data() {
    return {
      // 默认不折叠
      isCollapse: false
    };
  },

　　点击事件：

 // 菜单的折叠与展开
    togleCollapse() {
      this.isCollapse = !this.isCollapse;
    },

　　在计算属性中 动态绑定class样式，

computed: {
    toggleButton() {
      if (this.isCollapse) {
        return "minMargin";
      } else {
        return "maxMargin";
      }
    }
  }

　　css样式：

.minMargin {
  width: 10px;
  height: 100%;
  position: absolute;
  cursor: pointer;
  margin-left: 64px;
}
.maxMargin {
  width: 10px;
  height: 100%;
  position: absolute;
  cursor: pointer;
  margin-left: 170px;
}