后台管理系统拖拽左右宽度

   //左侧
   <!-- 左侧 -->
   //这里的detailWidth需要在data中进行声明
 <el-aside v-bind:style="{ width: detailWidth + 'px' }" id="resize">

 </el-aside>

//这个是拖动的中间线
 <i class="el-icon-arrow-left dragWidth" id="set_menu_width" @click="dragControllerDiv()"></i>
 
 
 methods:{
   dragControllerDiv: function () {
      // 保留this引用
      let data = this;
      let resize = document.getElementById("set_menu_width");
      resize.onmousedown = function (e) {
        // 颜色改变提醒
        // resize.style.background = "#67c23a";
        let startX = e.clientX;
        resize.left = resize.offsetLeft;
        document.onmousemove = function (e) {
          // 计算并应用位移量
          let endX = e.clientX;
          let moveLen = endX - startX;
          startX = endX;
          data.detailWidth += moveLen;
        };
        document.onmouseup = function () {
          // 颜色恢复
          resize.style.background = "";
          document.onmousemove = null;
          document.onmouseup = null;
        };
        return false;
      };
    },
 }
 
  mounted() {
    this.dragControllerDiv();
  },

   //右侧
       <!-- 右侧 -->
    <el-main>
      <div style="height:100%">
        <el-scrollbar style="height:100%" ref="myScrollbar">
          <el-timeline>

            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
      </div>
    </el-main>

    //最外面用一层el-container进行包裹
     <el-container>
     //里面是上面的布局内容
     </el-container>