Document

# 前言最近负责了项目的一个大迭代，但是有一个非常复杂的表格，怎么个复杂法呢。正常来说，我们前端的一个表格大多是使用ui框架中的现成表格组件，顶多就在表格里面内嵌一些输入框，选择框，改改内嵌样式什么的！但是这个表格，就真的很牛逼，给大家分享一下（如下），顺便记录一下。然后本人很菜，是个刚毕业的前端彩笔，看个乐子就行。 ![2.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/468f86f6f390487b8a8c3d5c129e3a98~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6JC96K--:q75.awebp?rk3s=f64ab15b&x-expires=1759635900&x-signature=1Z7xghg9swf5eBaWalPQzrUCcSQ%3D) 乍一看是不是也挺简单，就这？反正对我来说，是开发的想死了，我写这个表格使用三个饿了么的表格组件。是的，三个表格组件实现成同一个表格，经常写表格的大佬们应该一看就知道痛点在哪里了。 > 技术难点 > > 1. 表格的协同滚动 > 2. 左右两个表格是要能够左右滚动 > 3. 表格悬浮展示操作栏 > 4. 屏幕中间有个信息栏穿越整个表格的 > 5. 改变el-table的内置样式 # 为什么我要使用三个表格如下图，左中右分别都是一个表格组件，为什么要这个写，细心的盆友可以看到1和3的表格是可以**左右滚动**的，从**盒模型**的角度来看，就不可能写在同一个元素中了，而且以我目前的工作经验来看，滚动好像只能使用原生的，顶多改变一下样式。至于2的话，应该是可以不用这个表格组件也能写的，但是我为了方便就这样写了，使用组件的话很多样式就可以cv了。 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6d600c3fb0f448ab802de6fe34650495~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6JC96K--:q75.awebp?rk3s=f64ab15b&x-expires=1759635900&x-signature=nqPKCB8nHOcvUZ6IdSSOTEP0z6M%3D) # 表格的协同滚动前面说过，这个表格是由三个表格组件实现的，所以这个三个表格之间的协同滚动就非常的重要了，**比如我在1表格上下滚动，2和3表格也要对应的进行滚动**，同理在2或者3表格中上下滚动，对应的其他两个表格也应该进行滚动。还有就是**1表格和3表格是有一个镜像左右滚动**的。这样听起来好像非常easy是吧，就是**给每个表格都监听滚动事件，滚动的时候去改变其余的两个表格滚动条**。对整体思路就是这样，但是我写着写着就**死循环**了哈哈哈哈哈。 ```html Document

``` 这是一个小demo，大家可以复制一下去本地跑一下，可以发现 > 1. 不管是上下滚动，还是左右滚动，都是触发同一个滚动事件 > 2. 去设置scrollTop或者scrollLeft也会触发滚动事件函数也就是说，这三个表格，**任意一个表格滚动其实都是触发了三个表格的滚动事件**，当然这里是没有死循环的，因为我还有一个需求是在上下滚动的时候同时去改变左右滚动地方，所以就会导致**他调用她，她反过来又调用他**，所以就死循环了，后面是通过类似**防抖**的写法去解决的（如下vue3的写法），为什么说他是类似呢，因为它是三个事件函数去共用同一个防抖开关，所以他最后还是会多执行一次，有兴趣的大佬可以去试试。用这种写法也可以**减少函数执行次数**，也是一种**性能优化**哈哈哈哈。 ```js // updateMassge和setLeftFn是两个方法就不具体写了 // 防抖开关 const flag = ref(null) // 左表格滚动事件 const scrollLeftFn = e => { const scrollLeft = e.target.scrollLeft const scrollTop = e.target.scrollTop clearTimeout(flag.value) flag.value = setTimeout(() => { console.log("左表格执行") // updateMassge这个方法是去更新信息栏的一个方法，后面会有提到 updateMassge(scrollTop) middleTable.value.setScrollTop(scrollTop) rightTable.value.setScrollTop(scrollTop) // 设置左右滚动 setLeftFn(scrollLeft) }) } // 右表格滚动事件 const scrollRightFn = e => { const scrollLeft = e.target.scrollLeft const scrollTop = e.target.scrollTop clearTimeout(flag.value) flag.value = setTimeout(() => { console.log("右表格执行") // updateMassge这个方法是去更新信息栏的一个方法，后面会有提到 updateMassge(scrollTop) middleTable.value.setScrollTop(scrollTop) leftTable.value.setScrollTop(scrollTop) // 设置左右滚动 setLeftFn(scrollLeft) }) } // 中间表格滚动事件 const scrollMiddleFn = e => { const scrollTop = e.target.scrollTop clearTimeout(flag.value) flag.value = setTimeout(() => { console.log("中间表格执行") // updateMassge这个方法是去更新信息栏的一个方法，后面会有提到 updateMassge(scrollTop) }) } ``` # 信息栏该怎么实现呢我觉得这应该是这个表格最抓马的地方了，为什么呢，这个表格整体由三个表格组件**横向排列**形成的，所以想要横穿这三个表格放一个div，只能让它**脱离文档流**，去父相子绝的定位它。更恶心的地方是这个信息栏的位置是**需要根据表格的数据去确定位置**，如下图，信息栏中的数字是143.59，那它的位置就应该是在143和144之间。大佬们可以思考一下要怎么实现呢？ ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/989530b617734dc09d35bbd5ce95a4a9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6JC96K--:q75.awebp?rk3s=f64ab15b&x-expires=1759635900&x-signature=Ks3KmCWhRJaLmNos%2FXNr%2Bt0Qj9I%3D) 我说说我是怎么做的。首先，前面说过只能通过**绝对定位**去脱离文档流，将它放到它应该放到的地方去。应该说是**覆盖**，对！在这个信息栏的下面其实是有一行假数据的。所以最重要是去**正确的找到它的位置**（top）然后在表格滚动的时候**动态**的去更新它的位置也就是前面说的 ***updateMassge*** 方法，以及**如何控制它正确的显示和隐藏**（display）因为在它滚动到顶部或者底部的时候应该把它隐藏掉。 ## 寻找top 如何寻找top呢，首先就是维护好一个下标变量，有点像之前写过的一个算法题，**一个有顺序的数组，去找到他的插入位置，让这个数组依然有序**，我一开始使用的findIndex写的，然后项目提测后在一些特定的数据会有bug哈哈哈，因为在findIndex没找到的时候返回值是-1，就会有一些问题。其实就是一个**二分法**就能解决！ ```js function findInsertPosition(nums, target) { let left = 0; let right = nums.length - 1; while (left <= right) { let mid = Math.floor(left + (right - left) / 2); if (nums[mid] === target) { return mid; } else if (nums[mid] < target) { left = mid + 1; } else { right = mid - 1; } } return left; } ``` 拿到这个下标索引之后，就是一些把他的计算公式写出来，我当时搁那拿本子画了好久哈哈哈，要找到表格滚动高度scrollTop和top的一个关系。 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b200685768f341b38e4dcd22f731d15b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6JC96K--:q75.awebp?rk3s=f64ab15b&x-expires=1759635900&x-signature=1hWWcsYfGm4OI3ytCaNPf15FFwQ%3D) 如图，可以得出 > index \* 行高 + 表头高 = scrollTop + top 所以 > top = (index \* 行高 + 表头高) - scrollTop 然后就是在**滚动的事件函数中去动态的更新top**以及去**寻找出现信息栏和隐藏信息栏的临界点**。这个临界点也很好找，当**top小于0或者大于表格高度**的时候就隐藏，其他时候就显示 # 表格悬浮展示操作栏在前面的动态图中，可以看到这个表格，每**悬浮一列最左边或者最右边都会出现一个操作栏**，这个一开始不知道从何下手，因为我看element-ui中并没有提供能实现的这种效果的属性或者方法。不过还是给我想出来办法来了，不得不说我还是有点实力的哈哈哈哈哈。其实实现起来也非常简单，就是通过css的hover选择器去实现的，大家看一下伪代码应该就能明白是怎么实现的。 ## dom结构 ```js // 操作列 // 其他列 {{ scope.row[item.prop] }} ``` ## 样式 ```sass // 悬浮操作栏 .operation-show { display: none; } .el-table__body tr:hover > td .operation-show { display: block; } ``` 是吧，是不是非常简单，在最左边去**固定一个列去存放这些操作图标**，然后就是**css选择器**的使用，悬浮列的时候用选择器去选择到对应的div去改变他的display属性。 # 如何去改变饿了么组件的内部样式这些ui组件都是自带样式的，而我们要根据ui设计图去开发，所以学会去改变ui组件的内部样式是非常重要的，而一般我们都是通过**样式穿透**去改变的举个例子，当我们要改变el-table的样式时，首先需要将这个ui组件用盒子去包裹一层，并给定一个类名，用这个类名进行样式穿透。 ```js

``` 然后就是使用`::v-deep`去选定内置组件的类名或者标签名，然后在里面编写你想要的样式，至于内置组件的相关信息就需要使用`F12`**检查**去查看了。 ```sass .left-table { ::v-deep(.el-table-fixed-column--left) { border-right: 1px solid red; } ::v-deep(.el-table-fixed-column--right) { border-right: 1px solid red; } ::v-deep(.cell) { padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ::v-deep(.el-table thead th) { font-weight: 400; } } ``` # 总结这个表格除了这些主要的功能，还有很多小小的功能，其实现在都还在优化，特别是性能卡顿问题，因为这个表格还要实时的更新数据，所以在数据大量更新的时候根本使用不了，卡死了，也不知道我能不能把这个卡顿的问题优化好。**表格优化**的文章