完美解决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;
}
}