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

 

posted @ 2021-11-05 12:25  不由分说  阅读(1411)  评论(0编辑  收藏  举报