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

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

首先是三个表格的并排，使用flex布局即可

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

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

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

表1每个tr添加所占高度的class名：

表2每个tr添加所占高度的class名：

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);
复制代码

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

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