如何在另一个组件中控制Element组件侧栏的展开收起 以及如何解决切换时产生页面布局的影响

• 这个项目的需求是头部导航栏的组件中控制侧栏的展开收起 并且需要页面中的内容保持在满屏100vw
  

1. 先去element中将组件建好，引入组件在页面中显示
   element导航栏连接
2. 首先根据文档得到控制展开和收起的参数是collapse 需要在mode 为 vertical 时可用 就是侧栏使用
   在el-menu 标签中加入collapse 为true 但是为了能够控制展开和收起 需要定义一个变量来控制

• 注意： 一定要定义下 el-menu 的样式

 <el-menu
      :collapse="isCollapse"
    >
    //需要将切换后的侧栏样式复制过去
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
</style>

3. 在vuex中定义一个变量，这个项目需要页面打开是闭合所以在state中定义isCollapse为true
   mutations中定义一个改变isCollapse取反的方法

state:{
        isCollapse:true
    },
    mutations:{
        setBarCollapse(state){
            state.isCollapse = !state.isCollapse
        }
    },

4. 在头部导航栏组件中控制变量切换

// 通过变量为true还是false控制图标的切换
<i @click="setBarCollapse()" style="margin-left:10px;" :class="isCollapse?'el-icon-s-fold':'el-icon-s-unfold'"></i>
//引入变量方法
import {mapState,mapMutations} from 'vuex'
methods: {
    ...mapMutations(['setBarCollapse'])
  }
   computed: {
        ...mapState(['isCollapse'])
    }

• 这个项目的需求是页面中的内容要正好是100vw
  但是由于侧栏的宽度改变了 内容与右边空了很多
  
• 解决办法
  在父组件中根据变量来确定是否时展开还是收起 如果是收起就会有这个class名字
  
  通过 calc来控制 建议加上 !important

.shouContant {
  width:calc(100vw - 65px) !important;
}