dhtmx gantt甘特图在左侧表格和列都能拖拽的情况下，会突然弹回到默认宽度

原因：

移动鼠标的时候，页面重新渲染了,可以用onGanttRender事件去监听页面是否有重新渲染。

解决方案:

改变layout宽度之后要重置布局

gantt.resetLayout();

官方文档：docs.dhtmlx.com/gantt/api__…

源码

在mounted钩子函数调用即可！！！

handleResize(gridScaleHeaderWidth = 810){
      let _this = this;
        const ganttDom = this.$refs.gantt;
        const resizeDom = this.$refs.resizeRef;
        const leftDom = document.querySelectorAll(".gantt_layout_y")[0];
        const leftDomChild = document.querySelectorAll(".gantt_layout_y > div")[0];
        //左侧列表滚动条
        const scrollLeft = document.querySelectorAll(".gridScroll_cell")[0];
        const scrollLeftChild = document.querySelectorAll(".gantt_hor_scroll")[0];

        //右侧列表滚动条
        const scrollRight = document.querySelectorAll(".scrollHor_cell")[0];
        const scrollRightChild = document.querySelectorAll(".gantt_hor_scroll")[1];

        const rightDom = document.querySelectorAll(".gantt_layout_y")[1];
        const rightDomChild = rightDom.firstElementChild;
        

        resizeDom.onmousedown = e => {
          const startX = e.clientX; // 记录坐标起始位置
          leftDom.left = gantt.config.layout.cols[0].width; // 左边元素起始宽度
          // console.log("gantt.config.grid_width",gantt.config.grid_width); //810
          console.log("gantt.config.layout.cols[0].width",gantt.config.layout.cols[0].width);

        document.onmousemove = e => {
          const endX = e.clientX; // 鼠标拖动的终止位置
          let moveLen = leftDom.left + (endX - startX); // 移动的距离 =  endX - startX，左边区域最后的宽度 = resizeDom.left + 移动的距离
          const maxWidth = ganttDom.clientWidth - 6; // 左右两边区域的总宽度 = 外层容器宽度 - 中间区域拖拉框的宽度
          // console.log("maxWidth",maxWidth);
          // console.log("startX",startX);
          // console.log("endX",endX);
          // console.log("leftDom.offsetWidth",leftDom.offsetWidth);
          console.log("leftDom.left",leftDom.left);
          console.log("moveLen",moveLen);
        
          if (moveLen < 400) {
            moveLen = 400;
            console.log("往左拉到底了!!!");
          }
         
          if (moveLen > gridScaleHeaderWidth) {
            console.log("往右拉到底了!!!");
            moveLen = gridScaleHeaderWidth;
            console.log("moveLen",moveLen);
          }

          resizeDom.style.left = moveLen + "px";
          leftDom.style.width = moveLen + "px"; // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
          leftDomChild.style.width = "100%";
          scrollLeft.style.width = moveLen + "px";
          scrollLeftChild.style.width = moveLen + "px";
          _this.layoutWidth = moveLen;

          let rightDomResizeWidth = maxWidth - moveLen;
          rightDom.style.width = rightDomResizeWidth + "px"; // 右边区域 = 总大小 - 左边宽度 - 拖动条宽度
          rightDomChild.style.width = rightDomResizeWidth + "px"; // 右边区域 = 总大小 - 左边宽度 - 拖动条宽度
          scrollRight.style.width = rightDomResizeWidth + "px"; // 右边区域 = 总大小 - 左边宽度 - 拖动条宽度
          scrollRightChild.style.width = rightDomResizeWidth + "px"; // 右边区域 = 总大小 - 左边宽度 - 拖动条宽度

        }

        document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
            resizeDom.releaseCapture && resizeDom.releaseCapture(); // 鼠标捕获释放
            gantt.config.layout.cols[0].width = _this.layoutWidth;
            gantt.resetLayout();
            _this.addTaskLayer();
        };
        resizeDom.setCapture && resizeDom.setCapture(); // 启用鼠标捕获
        return false;

      }
    },