欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-26 15:02:57
完美解决ant-design-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的高度方法

看图

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

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

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

size 是表格尺寸

完结

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