vue三个表格并排,三个联动表格滚动监听

·  阅读 897
vue三个表格并排,三个联动表格滚动监听

几个月前vue项目中有三个表格并排,且表格联动滚动的需求,使用的是ant-design-vue的a-table表格,如下图: image.png

如图所示有表1、表2、表3,其中表1一条数据对应同一主id的表2的几条数据,同时表2对应同一主id的表3的几条数据,所以需要计算表1和表2每行的高度。

image.png

首先是三个表格的并排,使用flex布局即可 image.png

.table-flex{ display: flex; overflow: scroll; }

接下来是计算表1和表2每行所占高度,ant design vue利用rowClassName给table添加行样式 image.png

image.png

image.png

最重要的是lastTableRowNum和node.length的值,在获取列表数据时,返回的都是平行的数据,需要计算表1主id对应的表2和表3数据条数! image.png 如下图所示:

表1每个tr添加所占高度的class名: image.png

表2每个tr添加所占高度的class名: image.png

less 动态生成想要的class选择器

此时我们就要用到less中的loop,自动生成很多class名,因为每行数据高度可能对应有几十条数据,这边暂定自动生成38条class,即trHeight1、trHeight2...trHeight38。

.h(@i) when(@i <= 38){
  .trHeight@{i} {
     height: @i*54px;
  }
  .h((@i + 1));
}
  
.h(1);
复制代码

image.png

image.png

滚动监听: window.addEventListener('scroll',this.handleScroll,true)

image.png

image.png

今天最后一天,要过年啦,写的比较匆忙(计算方法没有写清楚),如有雷同的找我要代码!2022新年快乐!

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改