vue视图左右布局方法

 <div class="app-container" @mousemove="mouseMoveTrigger">
 <!-- 左边 -->
<div class="left" :style="{ width: leftOffset + 'px' }"> </div>
 <!-- 中间 -->
    <div class="pane-trigger-con" @mousedown="mouseDownTrigger"> <span class="dian"> ⋮ </span></div>
<!--用户数据 上面的搜索框部分 右半边-->
<div class="pane-right">
  </div>
<div>

/* 左右布局方法 */
     mouseMoveTrigger(event) {
      if (!event.which) this.triggerDragging = false;
      if (this.triggerDragging) {
        if(document.getElementsByClassName('hideSidebar').length==1){
        this.leftOffset = event.clientX- 60
        this.$nextTick(() => { //在数据加载完，重新渲染表格
    this.$refs['myTable'].doLayout();
   
  })
      }else{
        this.leftOffset = event.clientX- 220;
        this.$nextTick(() => { //在数据加载完，重新渲染表格
    this.$refs['myTable'].doLayout();

  })
      }
      }
    },
    mouseDownTrigger(event) {
      // console.log(345);
      this.triggerDragging = true;
      this.$nextTick(() => { //在数据加载完，重新渲染表格
    this.$refs['myTable'].doLayout();
    
  })
    },

.pane-right {
  flex: 1;  
  /* margin-left: 10px; */
  position: relative;
  min-width: 900px;
}

.pane-trigger-con {
  width:12px !important;
  background-color: #faf7f7;/* #fefefe */
  border-radius: 5px;
  cursor: ew-resize; 
}
.dian{
  color:#faf7f7 ;
}