完美解决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 可伸缩列的资料请关注www.887551.com其它相关文章!