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

原文地址:https://www.cnblogs.com/newh5/p/15512653.html