ant desing vue table 实现可伸缩列的完整例子

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

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

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

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

2.这回可以看到每次拖拽后translate属性实时在变化，但是单元格并没有变宽移动。

于是又是检查了元素，发现th的width在变化，但是colgroup的width属性没有变。于是开启了寻找对应的colgroup的子元素col之旅，最后找到了，然后就是一顿操作在draging的时候同时修改了 colgroup的col的width属性。这样就可以跟着变化了。

3.接下来我发现在固定列和固定表头的情况下拉伸会出现bug。

查看代码发现当为固定列或者固定表头的情况下实际上thead和tbody是在不同的 table上，这时候就需要找到所有的colgroup测col，改变width。这样就处理了固定表头的拉伸。但是固定列的情况还是需要另外设置css ，找到table-fixed-left重新设置宽度。

下面是一些代码

根据当前的th，判断th是父元素的第几个孩子节点，对应到colgroup的第几个col节点

重新设置固定列的宽度（只处理了左浮动）

解决多级表头伸缩列问题

递归遍历数组，获取宽度

递归遍历数组，获取当前列(这个递归真的很烦，不知道你们写递归是什么感受)

递归遍历数组， 获取多级表头操作列索引（同样难以忍受的递归，开始少了最后一个renturn 一直跑不对，递归的阴影面积正无穷）

下面是完整代码

这是一个js文件，通过mixin的方式引入table主文件， table 添加

后记 完美解决多级表头的伸缩列 修改原getdraggingmap方法，增加nodelevel 层级， isendnode是否是盖层级下最后一个节点， 以及this.maxlevel 记录最大层级

增加处理 table-draggable-handle的高度方法

看图

可拖拽区域为红色区域，为了达到这个效果，需要以下处理

首先去除css 中height ：100%；
然后在render时 设置组件高度如下

size 是表格尺寸

完结

以上就是ant desing vue table 实现可伸缩列的详细内容，更多关于ant desing vue table 可伸缩列的资料请关注其它相关文章！