本文记录通过 vue 的指令来实现的一种固定表头的方法
原理
- 通过 vue 的指令直接操作 dom
- 给 table 包裹一个 div(wrapper) 并设置固定高度,让 table 在里面滚动
- 监听 wrapper 的滚动事件,并在 handler 里获取其 scrollTop,并设置 thead 的 style
transform: translateY( scrollTop )
code
补充
- 可以设置 thead 的背景色,从而掩盖滚动上来的 tbody 里的内容
- 获取 scrollTop 的元素不一定是最外围包裹元素,而是有滚动条的那个元素(如果使用 elementUI 的 el-scroll-bar 就会有这种问题)