el-table设置滚动后表头吸顶

已于 2025-06-09 20:27:18 修改
阅读量110 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： javascript vue.js 前端
于 2025-06-09 20:16:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43837268/article/details/148541989

原则：能使用CSS就别用JS

::v-deep .el-table {
    overflow: unset;
    .el-table__header-wrapper {
      position: sticky;
      top: 0px !important;
      z-index: 99;
    }
  }

解决 element-ui 的 el-table 自动吸顶（支持fixed）
态度决定一切
09-22 9136
看了很多案例，从简单的角度，position:sticky，似乎是比较理想的选择，可是当el-table设置了fixed后，这里的fixed会失效。最后还是采用了js监听滚动的思路实现。 获取表格距离顶部的距离; 设置表格距离顶部多少就吸顶---offsetTop1; 获取滚动条滚动的距离; 当滚动条滚动了 offsetTop1 后，表格就自动吸顶;
vue3 element-plus el-table表头冻结，表头吸顶
东明之羞的博客
11-27 4584
element-plus，el-table表格进行吸顶，冻结表头，复制脚本文件，进行引用，快速实现。
vue element el-table表头吸顶实现详情（适用于表头无fixed属性使用）
weixin_53082364的博客
05-13 3541
el-table表头吸顶实现详情（适用于表头无fixed属性使用） 1、设置 ref=“tableSort” <el-table ref="tableSort" v-loading="listLoading" :data="list" border @selection-change="setSelectRows" @sort-change="sortChange" > 2、设置页面滚动
在若依框架下，el-table顶部吸附后，左侧菜单收回弹出后，表头重新计算
qq_45311650的博客
11-17 444
el-table顶部吸附，若依框架菜单弹出表格错位
Element table 表头吸顶效果（适用于表头无fixed属性使用）
单飞吧的博客
11-24 2159
在 main.js 自定义 sticky 指令 Vue.directive('sticky', { // 指令的定义 inserted(el,binding) { // 获取表头 const dom = el.children[1] const dom2 = el.children[2] // 获取滚动元素 const scrollParent = document.querySelector(binding.value.parent) scrollP
el-table-sticky:元素ui表Head始终停留在屏幕顶部
05-10
npm i el-table-sticky -S import Vue from 'vue' import stickyDirective from 'el-table-sticky' Vue . use ( stickyDirective ) < el> </ el> 注意 当前，该指令的使用仅支持表预览，而不支持列复选框模式和列...
vue2 elementui el-table表头冻结，表头吸顶
03-18
### 实现 Vue2 和 ElementUI 中 `el-table` 的表头冻结与吸顶效果 为了实现 `el-table` 表头的冻结和吸顶效果，可以结合 CSS 属性 `position: sticky` 来完成。以下是具体的实现方法： #### HTML 结构 通过设置 `...
el-drawer内部el-table表头吸顶
10-13
当你在`<el-drawer>`内嵌套`<el-table>`并希望表头固定不动，使其始终保持在顶部，可以使用`el-table`的`sticky`属性，设置`header`为`true`。 例如： ```html <el-drawer :width="200" :visible.sync=...
el-table 表头吸顶
最新发布
07-29
要实现 `el-table` 组件的表头吸顶效果，可以通过多种方式来完成，具体实现方法如下： ### 1. 使用 `position: sticky` 实现基础表头固定 通过 `CSS` 的 `position: sticky` 属性可以实现表头的吸顶效果。此方法...
elementUI table 表头吸顶效果
m0_66743830的博客
07-10 6138
elementUI table 表头吸顶效果
非常不错的吸顶效果
11-18
网页吸顶，下托网页悬停网页顶部 我修改处理后可用的吸顶特效代码
vue element 表头吸顶 并且可以随着大盒子左右滚动
qq_36940740的博客
08-21 3814
当前需求是 1.整个页面可以垂直滚动 2.整个红盒子可以横向滚动（横向滚动时上面的盒子固定不动） 3.上面的盒子高度不固定 4. 垂直滚动时table的表头到达顶部时吸顶。 解决方案： 需求1 不提。 需求2 红盒子横向滚动 不提。上面的盒子固定不动 需要使用sticky粘性定位。 需求3 高度不固定会对需求2以及需求4有影响。 需求4 因为我的table头不仅要吸顶 还要可以横向滚动 所以动态给表头添加position :fixed 明显就不合理了。需要给它添加position:ab..
vue中el-table滚动到下面吸顶效果实现
qq_39162196的博客
02-21 795
基于el-table吸顶效果实现
el-table 实现表头置顶【干货满满】附源码
Anonymous996的博客
06-10 3041
从源码角度出发，ElTable表头固定显示。
ElementUI表格吸顶(sticky)
weixin_49645803的博客
09-12 1444
ElementUI表格吸顶(sticky)
element table表头固定悬浮，element table表头黏性布局，element table表头悬浮窗口
qingdi1的博客
12-03 2758
element table表头固定悬浮，element table表头黏性布局，element table表头悬浮窗口效果图图一图二图三图四修改方案代码scriptcss 效果图 图一 图二 图三 图四 修改方案 在不更改element 组件的东西，也不需要动原来的一行代码，一次写入，整个项目有效 代码 app.vue加入如下代码,整个项目的table表单都生效，注意使用如果有用请记得点赞 script mounted() { window.addEventListener( '
实现element-ui 的 el-table 表头自动吸顶功能（sticky）
weixin_46343439的博客
03-03 4091
实现el-table 表头自动吸顶在页面顶部，只需要在style中加上以下css即可，表头栏固定位置与顶部距离可以调整 top：0px 值达到合适位置
解决 element-ui 的 el-table 自动吸顶（支持fixed，keep-alive的使用）
weixin_41308436的博客
03-01 5735
el-table不设定高度,同时表头固定顶部，吸附顶部
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值