element ui table 滚动条回到顶部、底部

最新推荐文章于 2025-06-11 11:28:02 发布
最新推荐文章于 2025-06-11 11:28:02 发布
阅读量9.1k 收藏 2
点赞数 1
分类专栏： elementUI
本文介绍如何在ElementUI的表格组件中，通过设置scrollTop属性，实现数据行添加后自动滚动到第一行或最后一行的方法。这解决了在动态更新数据时，表格无法自动滚动到新增行的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

element ui table 添加数据行后滚动条滚动到对应的行头或行尾问题；

滚动到第一行：

this.$refs.table.bodyWrapper.scrollTop =0;

滚动到最后一行：

this.$refs.table.bodyWrapper.scrollTop =this.$refs.table.bodyWrapper.scrollHeight;
--------------------- 
作者：山貓 
来源：优快云 
原文：https://blog.youkuaiyun.com/lynxkor/article/details/78069661 
版权声明：本文为博主原创文章，转载请附上博文链接！

elementUI el-table 默认滚动条在表格的最底部
grootbaby
11-07 3824
elementUI 框架，获取不到表格里面的某个元素的 id，但是 el-table 里有个 bodyWrapper 它指向的是 el-table 的表格内容部分，存在 scrollTop，scrollHeight 属性，所以可以用下面方法来实现滚动条在底部的效果。（备注： 需给对应的el-table 设置ref 属性，，本案例中ref 设置为editTable）另外，如果要在不同屏幕下表格高度需要适应屏幕的话，需要用到 window.onresize 函数。
解决 Vue element ui 的table水平滚动条固定底部（两个姿势）
热门推荐
@baby张~的博客
03-28 2万+
前提条件，需求： 使用vue element UI 的table 由于横向数据比较长，小屏幕电脑会出现水平滚动条，假如每页20条数据，那么我想对第一条数据进行操作，我得先滚动到table最下面，再拉动水平滚动条到最右边，再回滚到最上面，对末尾的操作进行点击。 这样操作太繁琐，所以提出需求：屏幕过小出现水平滚动条时候，将table的水平滚动条固定再屏幕底部。 element ui 的table并...
element-ui中el-table添加滚动条
rayshaan0123的博客
06-22 9107
element-ui中el-table添加滚动条 1.找到.el-table__body-wrapper 2.在此盒子上添加样式 /*scss*/ /deep/ .el-table__body-wrapper{ /* /deep/深度监听 */ height: 135px !important; /*给到固定的高度(内容高度要超过此高度)*/ overflow-y: scroll; /*y轴溢出显示滚动条*/ &::-webkit-scrollbar{/* 取消滚动条宽
el-table 表格滚动条样式修改
最新发布
m0_69140165的博客
06-11 362
element-plus el-table 表格滚动条样式修改
Vue3 el-table滚回到顶部
小废物
03-12 1450
【代码】Vue3 el-table滚回到顶部。
vue+element 模态框内容添加回到底部，顶部
qq_31452297的博客
12-28 909
问题，自己再项目中有回到顶部底部组件，在模态框中缺无法使用，怎么监听dom滚动条都无济于事； 首先都是在挂载函数里面添加了监听 mounted() { // window.addEventListener("scroll", this.handleScroll,true); // 监听（绑定）滚轮滚动事件 }, 但是这样只能监听到body的滚动，当模态框弹出，我仔细检查发现，element 把body的滚动条直接隐藏，而是模态框里面的滚动条，所以在这个里面监听不到任何数
vue + elementUI 给el-table 增加一条数据，默认滚动条滚动到表格的最底部
weixin_45646663的博客
05-14 2141
因为用到了elementUi框架，不容易获取到表格里面的某个元素的id，所以上面方法不是很适用，查相关资料发现，el-table里有个 bodyWrapper 它指向的是el-table的表格内容部分，存在 scrollTop，scrollHeight 属性，所以可以用下面方法来实现滚动条在底部的效果（备注： 需给对应的el-table 设置ref 属性，，本案例中ref 设置为editTable） watch: { //DrugList 是整个表格的数据源，当添加一条数据的时候，监听DrugList
监听element-ui table滚动事件的方法
10-17
加载新数据后，为了避免滚动条突然跳回到顶部，需要调整滚动条的位置。在加载新数据后，将滚动条位置向下移动一个安全距离（例如100像素）： ```javascript getMoreLog() { // ... 请求更多数据 ... // 更新滚动...
修改element-ui中的表格el-table的滚动条样式
weixin_53474595的博客
02-16 5776
修改element-ui中的表格el-teble的滚动条样式
element的el-table中记录滚动条位置的示例代码
10-16
在本篇示例代码中，将重点介绍如何在Element UI的el-table组件中记录和恢复滚动条位置。 通常情况下，直接通过JavaScript的`scrollTop`属性赋值来控制滚动条位置，这种方法简单直接。但在一些特定的场景下，例如在...
el-table滚动条返回最顶端
weixin_43130016的博客
08-18 1721
滚动条返回最顶端
element-plus 表格翻页之后滚动条回到顶部
niyooooo的博客
04-12 2466
给el-table添加属性ref="tableRef"，再将这个ref对象创建出来 let tableRef = ref(null); 最后在翻页触发的事件中写 tableRef.value.setScrollTop(0);
Element Plus el-table 换页后返回顶部
许失之的笔记
02-25 1686
废话不多说，直接上代码： <el-table ref="table" ></el-table> this.$refs.table.$refs.scrollWrapper.setScrollTop(0); 打印出来各种看，终于找到，亲测有效~~
滚动条自动滚动到底部
qq_47099087的博客
06-08 288
【代码】滚动条自动滚动到底部。
vue + elementUI 框架下给el-table 增加一条数据，默认滚动条定位到表格的最底部
yx_cos的博客
07-03 9151
最近做项目的时候有个需求--需要给表格增加数据，然后数据多的情况下表格会出现滚动条，需要默认定位到表格的底部。 效果图： 一般的js的做法是： let table = document.getElementById('id名字'); table.scrollTop = table.scrollHeight; 因为用到了elementUi框架，不容易获取到表格里面的某个元素的id，...
el-table切换页码后，返回数据顶部
m0_53251830的博客
03-10 815
el-table切换页码后，返回数据顶部
表格操作之el-table行内新增自动滚到最顶部或者最底部
weixin_44482361的博客
10-23 5490
el-table新增一条行内数据 <el-button type=“text” @click=“addBtn”>新增 ##(一定要在table里面加 ref=“xxxxxxxx”) // 新增按钮 addBtn() { let rowObj = { id: null, topDepth: ‘’, bottomDepth: ‘’, thickness: ‘’, interpConclusionName: ‘’, remark: ‘’, } this.tableData.push(rowObj)
element plus table 滚动监听 触底
weixin_45042868的博客
06-21 3952
参考了网上的其他的element ui 的滚动触底的方法，但是无法获取bodyWrapper的scrollTop,这里我就直接去找了那个提供实际滚动的容器.el-scrollbar__wrap了。
el-table滚动到底部
qq_34631220的博客
07-15 663
【代码】el-table滚动到底部。
element ui隐藏table滚动条
06-28
回答3：</h3><br/>在 Element UI 中，我们可以使用 el-table 组件来显示数据表格，而当数据量较大时，就会出现滚动条。如果我们希望隐藏滚动条，可以采取以下方法： 方法1：CSS 样式方式 1.在 el-table 标签上加上...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值