ElementUI表格滚动条位置重置

最新推荐文章于 2024-05-21 18:55:09 发布
最新推荐文章于 2024-05-21 18:55:09 发布
阅读量3.5k 收藏 10
点赞数 7
分类专栏： ElementUI 前端 文章标签： ElementUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NuoYan3327/article/details/103475682
版权

       在使用ElementUI时使用表格组件时遇到了一个问题，当我在弹出层中嵌套使用表格组件时如果我的表格内容过长出现滚动条时，我把滚动条拖放到中间位置后关闭这个弹出层，当我下次重新打开时这个表格的滚动条位置仍然保留了上次退出时的位置，导致了画面没有显示最初始的效果。

       这个问题可能在表格与其他组件多重嵌套的情况下会复现，想让表格下方或者右方的滚动条位置复原其实也很简单，首先我们需要在el-table标签中加上ref属性 让它的值与你当前表格绑定的数据源一致。

       随后如果你想重置横向滚动条需要使用的代码为:

      vm.$refs.tableData.bodyWrapper.scrollLeft = 0;

       纵向滚动条代码为：

      vm.$refs.tableData.bodyWrapper.scrollTop = 0;

       vm为vue对象名称，tableData为当前ref绑定值

       这段重置滚动条起始位置代码可以放在弹出层关闭的回调close事件中，具体还看你自己怎么安排咯，如果能帮到你还请点个赞！ヾ(￣▽￣)Bye~Bye~

三分妄想
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element的el-table中记录滚动条位置的示例代码
12-30
场景重现：在项目中使用了keep-alive来缓存组件，且使用element中的table列表，但在项目中是对table进行了二次封装，跟页码合在了一起。按照网上的直接对scrollTop赋值，赋值失败了，还要加上setTimeout才能成功，虽然实现了功能，但是不知道原因，可以的话希望有人能解答。 废话少说，直接赋上代码。 ... <wp-pager @page-change=pageChange :total=total v-if=
vue+elementui 对话框取消 表单验证重置示例
10-16
今天小编就为大家分享一篇vue+elementui 对话框取消 表单验证重置示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element中的table固定左侧列之后，底部滚动轴不能滚动到最左侧
weixin_44632257的博客
10-27 463
添加css样式： .el-table--scrollable-x .el-table__body-wrapper { z-index : 1; }
解决element-ui中的el-table中列更新问题以及滚动条会重置到最顶部的问题
最新发布
gxdzi的博客
05-21 377
2.问题2，调用 this.key = Math.random()后会导致table的滚动条被重置到最上面的问题，解决办法就是，调用this.key之前先记录滚动条高度，调用完成后还原成之前的高度。
elementUI 表格翻页后 滚动条回到顶部
weixin_44933530的博客
05-06 3362
elementUI 表格翻页后 滚动条回到顶部 在触发翻页事件添加 (在table添加ref=‘table’) this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0 })
滚动条实现刷新回到顶端效果及常见问题
n_j_q的博客
09-01 704
滚动条实现刷新回到顶端效果及常见问题
vue3+element-plus, 设置table表格滚动到最底部
csdn_cai_csdn的博客
12-13 1134
【代码】vue3+element-plus, 设置table表格滚动到最底部。
vue elementui中使表的滚动条 滚到顶部或底部
u012970538的博客
09-14 2361
1.设置table的ref为tableList。
Vue实现渲染数据后控制滚动条位置(推荐)
10-15
5. **注意事项**：在实际应用中，可能还需要考虑性能优化，例如避免频繁触发滚动条的设置，或者在滚动事件中监听用户手动滚动的情况，以防止滚动条被自动重置。 总结起来，Vue实现渲染数据后控制滚动条位置的关键...
原生js仿浏览器滚动条效果
10-20
滚动条的宽度、圆角、位置和背景色都可以根据需求自定义。 3. **JavaScript 逻辑**： - 使用`$(id)`函数获取DOM元素，这是一个简化的ID选择器。 - 计算了内容`dp`和容器`demo`的高度，以及根据比例计算自定义滚动...
elementUI 表格刷新后保持行高亮显示，以及翻页时回到顶部
China_Edc的博客
04-24 1866
第一步： 点击的时候，把该行的值，赋值到currentRow。 第二步： highLightRow() { if (this.currentRow === null) return; for (const item of this.tableList) { if (item.ID === this.currentRow.ID) { this.$refs.archivesTable.setCurrentRow(item); }}}, 第三步： 在更新表格的数据的成功回调函
elementUI 表格翻页后，滚动条回到顶部
zhengyun1568的博客
10-22 3886
elementUI 表格翻页后，滚动条回到顶部 在页面翻页触发的方法后面添加（记得现在table上添加 ref=‘table’） this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0 }) ...
el-scrollbar
m0_47204596的博客
11-20 281
前言 最近公司项目遇到个需求，需要美化浏览器的滚动条，所以用到了element组件库的el-scrollbar组件。vue-router 切换页面时因为 el-scrollbar组件包裹着router-view，所以页面切换时滚动条不会置顶。 但尴尬的是，饿了么官方没有给出el-scrollbar组件的api文档，所以只能自己动手查看源码。 作者：咸鱼翻身翻两次 链接：https://juejin.cn/post/6844903880782774285。 提示：以下是本篇文章正文内容，下面案例可供参考 使
element-ui table 设置表格滚动条位置
weixin_55510188的博客
03-01 4507
在切换不同页面时（被 keep-alive 缓存的组件间切换），页面中的element-ui table的滚动条位置没有停留在原来的位置。目前需要切换不同的页面返回来后，滚动条保持在原来的位置。
el-table 定位 跳转 至指定 行 位置，保证数据更新后位置不变
丶扁扁的糖是扁的 的博客
12-09 7044
el-table数据刷新后会重新定位至表格头的位置，想要更新数据后任处于之前操作的位置，就要在操作时记录下当前表格滚动条的位置，数据更新后设置表格位置为刚才记忆的位置。 记忆上次位置： /** * @description: 获取表格滚动条位置 * @param ifMemory 有没有ifMemory决定了该函数是保存位置还是跳转位置 * @return void */ getTableScrollTop( ifMemory = false
vue elementUI怎样解决表格滚动条滑动，表格错位
ALSO666的博客
10-20 1645
vue elementUI怎样解决表格滚动条滑动，表格错位
vue完美解决element-table表格固定列后滚动至底部表格错位问题
IamKangDi的博客
02-15 4988
在此之前改变过滚动条的样式，最好高度一致，兼容webkit内核的浏览器。element-table表格错位，项目介绍 vue2+elementUI+less。
vue学习之elementUI表格数据变动时滚动条回到顶部
King的博客
01-27 2846
问题场景：在tab切换表格或者切换页面时，希望滚动条每次都回到顶部。 代码： table上添加 ref='table' this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0 })
el-table + setup语法糖 + 列表变化后滚动条置顶
dzkkkkkk的博客
02-27 676
el-table + setup语法糖 + 列表变化后滚动条置顶 由于需要做一个el-table，然后再更新地图同时将滚动条滚至最上。但是网上很多资料都是使用this.$refs： // 底部 this.$nextTick(() => { this.$refs.tableData.bodyWrapper.scrollTop = this.$refs.tableData.bodyWrapper.scrollHeight }) // 最顶 this.$refs.tableData.bodyWrapper
handsontable滚动条滚动时表格样式会被重置
06-07
当您滚动表格时，Handsontable 会重新渲染可见部分的单元格，但对于不可见的单元格，它们将从 DOM 中移除以提高性能。 因此，您可能需要在单元格渲染时保存其状态并在需要时重新应用。您可以使用 Handsontable 的 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值