el-table实现自动吸顶效果(支持fixed)

前言

看了很多案例,从简单的角度,position:sticky,似乎是比较理想的选择,可是当el-table设置了fixed后,这里的fixed会失效。最后还是采用了js监听滚动的思路实现。

实现思路

    1.表格距离顶部的距离。

   2.设置表格距离顶部多少就吸顶—offsetTop1。

    3.获取滚动条滚动的距离。

    4.当滚动条滚动 offsetTop1 后,表格就自动吸顶。

效果如图:


使用:

在el-table标签中配置:v-sticky="{ top: 0, parent:’#appMainDom’}",


<el-table

:data="tableData" style="margin:10px 0;width: 100%;"

bordermax-height="800"  class="sticky-head" v-sticky="{ top: 0, parent:'#appMainDom' }" >

...

</el-table>



源码地址:el-table实现自动吸顶效果(支持fixed)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容