html 里固定表头（vue）

本文记录通过 vue 的指令来实现的一种固定表头的方法

原理

• 通过 vue 的指令直接操作 dom
• 给 table 包裹一个 div(wrapper) 并设置固定高度，让 table 在里面滚动
• 监听 wrapper 的滚动事件，并在 handler 里获取其 scrollTop，并设置 thead 的 style transform: translateY( scrollTop )

code

demo

补充

• 可以设置 thead 的背景色，从而掩盖滚动上来的 tbody 里的内容
• 获取 scrollTop 的元素不一定是最外围包裹元素，而是有滚动条的那个元素（如果使用 elementUI 的 el-scroll-bar 就会有这种问题）