vue中el-table实现自动吸顶效果(支持fixed)
是我需要的效果,是我搞不定的效果,网上有现成的,感谢互联网~
以下内容为摘抄:
前言
看了很多案例,从简单的角度,position:sticky,似乎是比较理想的选择,可是当el-table设置了fixed后,这里的fixed会失效。最后还是采用了js监听滚动的思路实现。
实现思路
- 表格距离顶部的距离
- 设置表格距离顶部多少就吸顶—offsetTop1
- 获取滚动条滚动的距离
- 当滚动条滚动 offsetTop1 后,表格就自动吸顶
使用:
在el-table标签中配置:v-sticky="{ top: 0, parent:'#appMainDom'}",
说明
参数名字 | 类型 | 说明 |
---|---|---|
top | Number | 滚动条距离顶部多少像素,自动吸顶 |
parent | String | 滚动的dom元素,内部使用querySelector获取该元素 |
文章来源:https://www.jb51.net/article/224462.htm
gitee案例源码:
https://gitee.com/kaiking_g/test-element-by-vue.git