关于el-tree横向折叠的实现

Element-UI官方文档Tree 树形控件只支持竖向折叠，不支持横向折叠，需要自己写事件，结合Vue v-if或v-show实现

1、el-col或者div设置v-show绑定显示标识

      <!--部门数据-->
      <el-col :span="4" :xs="24" v-show="showelcol">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入企业名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"/>
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"/>
        </div>
      </el-col>

2、数据设置showelcol: true，默认显示

data: function () {
  return {
   showelcol: true,
   iconData: 'el-icon-arrow-left',
     }
  }

3、添加按钮通过控制数据变化来控制el-col显示隐藏

  <el-button @click="changeShowelcol">显示/隐藏</el-button>

changeShowelcol(){
  this.showelcol=!this.showelcol;
},

   添加图标通过控制数据变化来控制el-col显示隐藏并动态切换图标

<el-button type="text" @click="changeShowelcol" class="icon-button" v-bind:icon="iconData"></el-button>

    changeShowelcol() {
      this.showelcol = !this.showelcol;
      if (!this.showelcol) {
        this.iconData = 'el-icon-arrow-right'
      } else {
        this.iconData = 'el-icon-arrow-left'
      }
    },

4、页面结构以及按钮位置

 按钮位置只需要通过调节margin-top 使按钮调节到合适位置

<style scoped>
.icon-button {
  margin-top: 270px;
}
</style>

 也可以使用弹性布局使按钮在el-col中居中

<el-col :span="1" class="flex-center">
  <el-button type="text" @click="changeShowelcol" class="icon-button" v-bind:icon="iconData"></el-button>
</el-col>

.flex-center{
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

5、存在问题：隐藏el-col之后，页面会留一部分空白，非常不美观，

解决方法：对其他部分页面使用动态:span

<el-col :span="this.showelcol==true ? 20:24" :xs="24">

效果图：