ant-desing-vue table 可伸缩列在固定列、多级表头情况下的实现以及问题解决

完美解决ant-design-vue table 可伸缩列问题，实现在固定列，多级表头情况下的伸缩列

这篇博客真的很用心在写了，遇到的很多问题都记录下来了，并且将解决方案一并给出，希望大家看到的点个赞 ，然后有问题的地方欢迎指教

问题说明1

在写完这篇文章几天后，突然发现了一个问题。看下图是添加完伸缩后的dom结构

**红框的div为拖拽的手柄，是通过render进去的。可以看到有一个style样式 transform：translate（150px， 0）。这个150是怎么来的呢，150是表格column数据的width。而且这个div是相对th的绝对定位，left为 负的 手柄宽的一半这个很好理解吧。那么问题来了，这个column的width属性实际上设置的是min-width。也就是说当容器的宽度远大于表格所有column的width的和时，单元格的width会自适应撑开，拿这个150为例子 单元格的宽度不再是150了，而是适应容器后的大于150的一个数据。但是啊，这个resizeable插件并没有处理这种情况，所以translateX 一直是150，导致 拖拽的手柄不在期望的右border上 **

解决办法：

禁止 transform样式
left -10， 改为right -10 这样就ok了

.table-draggable-handle {
   
      transform: none !important;
      bottom: 0;
      right: -10px !important;
      cursor: col-resize;
      touch-action: none;
      position: absolute;
    }

---

注意 对了这里的this._.forEach 是lodash的写法， 因为原生forEach不会跳出循环）
这个东西本来以为手到擒来，因为在官网中已经给出了例子，但是果然还是不能太信任官方，官方给出来的只能是最基础的，然后我们正常的使用场景往往要复杂很多，比如固定列， 比如固定表头，比如自带checkbox列，比如多级表头的情况。要想满足这些情况往往需要自行开发。

1.首先蒋官方的例子copy下来，居然拖不动。

对照了一下官方，css居然都不一样，于是增加了第一个改动
因为style内联样式自带了 translate属性，所以直接去掉right：0；只留left -5.height设置100%就可以。

.resize-table-th {
    position: relative;
    .table-draggable-handle {
      height: 100% !important;
      bottom: 0;
      left: -5px !important;
      cursor: col-resize;
      touch-action: none;
      position: absolute;
    }
  }