改BUG实操 el-table固定表头滚动时表头不跟手抖动的问题

989 阅读1分钟

了解一个问题要从:是什么,为什么,怎么做。逐步深入去考虑

本文根据博主 程序员小山与Bug 视频整理总结而来 已获得博主同意

FFF7655CA5A0B8B0FA98E2894CF0CA32.png

学习思路、方法 举一反三

正文开始

bug 是什么?

在 el-table 的固定列模式中,element.eleme.cn/#/zh-CN/com… 左右滚动时,表头会产生抖动

09321D59B8A8A2A0DA152953F2BC13A2.png

分析 bug

已知 el-table 为了实现表头固定,其实表头和表体是2个不同的表格,如图所示:

image.png

image.png

拆分后 用 js 监听实现上下的同步

解决 bug

去看源码

image.png

会看到一开始就有一个节流,尝试把节流去掉,发现确实可以了,但是这就完了么?

1B99C90DB4B164C0C6DF55CBA9CC6D93.png

就这么简单?这就完了?

我们改动别人的代码/源码,抛开性能优化之类了,要想到,设计者当初加这个功能,是不是要解决某些 bug ,你把这个给人家去掉了,是不是那些 bug 就暴露出来了?

幸好我们有 git 可以从提交记录里去找找线索

跟随者博主的脚步,把代码拉下来一看,3个月前,element 团队也修复了这个bug

image.png

至此,我们打开 element 的 github,果然!!!github.com/ElemeFE/ele…

image.png

分析源头

我们要找的是,当时为啥加上这个节流,所以继续翻看源码

在看代码 git 提交记录,找到对应的某处提交这个节流的时候,发现当时那个提交记录的 issues 没有提到相关问题,由此可见,去掉这个节流,除了对性能影响,并不会造成可见的 bug

学习前辈发现问题,分析问题,解决问题的能力