setScrollTop不生效问题

最新推荐文章于 2024-06-19 20:53:45 发布
最新推荐文章于 2024-06-19 20:53:45 发布
阅读量678 收藏
点赞数
文章标签： vue.js 前端 javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhumf583/article/details/131781070
版权

需求：vue3中el-table表格数据更新，滚动条滚动到表格尾部，

使用setScrollTop不生效问题


遇到的问题是：

通过ref获取表格tableRef，表格高度为255，使用tableRef.value.setScrollTop(255)不生效


解决过程：

一步一步查看tableRef的内容，发现tableRef.$refs中有一个scrollBarRef，展开发现这里存放了setScrollTop，最终使用tableRef.value.$refs.scrollBarRef.setScrollTop(255)成功实现。

five_5555
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
解决vue页面DOM操作不生效的问题
08-27
下面小编就为大家分享一篇解决vue页面DOM操作不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Android 接口setComponentEnabledSetting不生效问题.pdf
08-16
在通过接口setComponentEnabledSetting，设置android组件可用或者不可用的时候，如果刚刚设置完成后，立即交流看关机，发现开机后本次设置并没有被保存。本文详细的分析了这个问题。
vue3 滚动切换菜单栏,点击菜单又滚动到对应的高度
weixin_44565776的博客
12-16 629
如在做测试时，自己有时候，在实现一个方法，寻找了多个方法实现的时候，总觉得差那么一点点，但是又找不到这一点点的差距在哪里，就会不停的去做项目测试，不停的调整细节，试图将差的一点点问题找出来，这时候，就陷入了一种“死磕”的状态，这种状态下，效率是非常低下的，自身思维陷入一个怪圈，一直重复了前面的操作：寻找新方法 -> 调整代码 -> 测试效果 -> 再寻找新方法，如此循环。在遇到“死磕”状态时，不如站起身来，去倒杯水，转转圈，调整一下自身的状态，思考，换个角度去思考问题，也许有更多的收获。
vue组件获取 scrollTop焦点 和设置scrollTop 来保存组件的数据和滚动位置
YanLong_Lin的博客
06-16 4103
我的项目中使用了vue和 vant 其中封装的组件有点多，先要的效果就是 缓存list数据并且下拉数据时候 当 点击item项目时候 按回退时候 滚轮还是在原来位置 其中 数据缓存不在这里说了使用的是 上代码 这是封装的组件内部是什么不重要 主要是ref=“articleListBox” <template> <div class="article-list" ref="articleListBox"> <van-pull-refresh v-model="refr
vue3 +Element-puls ,table 中使用$refs修改scrollTop 到顶部
weixin_39475476的博客
12-09 2959
const elTableRef = ref(); //表格id
Element Plus 实例详解（五）___Scrollbar 滚动条
逆境清醒的博客
03-26 6482
Element Plus Scrollbar 滚动条，用于替换浏览器原生滚动条。主要内容有：Scrollbar 滚动条基础用法，横向滚动Scrollbar用法，Scrollbar滚动条最大高度与元素高度关系，手动滚动Scrollbar滚动条。1Element Plus 实例详解（一）__安装设置2Element Plus 实例详解（二）___Button 按钮3Element Plus 实例详解（三）___Date Picker 日期选择4Element Plus 实例详解（四）___Border 边框5。
使用粘性定位实现列固定可左右滑动的table布局
weixin_43827779的博客
09-09 1165
<template> <div class="base-table"> <header class="base-table__title">表格标题</header> <div class="base-table__body list-content"> <table> <tr> <th>固定1</th> <
vue中el-scrollbar返回顶部功能
weixin_50261167的博客
01-18 1907
vue中页面局部部分返回顶部
解决vue addRoutes不生效问题
10-14
然而，有时可能会遇到`addRoutes()`不生效的问题，导致新添加的路由无法正常工作。 **问题起因：** 当动态添加路由后，如果不正确地处理路由生命周期，特别是在用户登出再登录时，可能会导致路由冲突。例如，如果在...
通过python 执行 nohup 不生效的解决
09-17
然而，在使用Python的paramiko模块通过SSH执行`nohup`命令时，可能会遇到命令不生效的问题。这个问题通常由于命令执行后通道被立即关闭导致。 首先，我们来看一个简单的示例，尝试通过paramiko执行`nohup ping ...
解决在vue项目中webpack打包后字体不生效的问题
10-18
然而，在打包过程中有时会遇到一些问题，其中之一就是字体不生效。这个问题通常表现为在开发环境中正常显示的字体，在经过Webpack打包后在生产环境中无法正常渲染。 出现这种问题的原因在于Webpack在处理CSS时，...
elementUI中的 el-table 实现虚拟滚动
Hyanl的博客
03-02 6933
解决该问题主要是用虚拟滚动的思路。引发页面卡顿的原因主要是由于数据量太大导致渲染的 dom 较多，然后页面就卡顿了。使用了 elementUI 中的 el-table 组件，不使用分页，当表格数据过多时导致页面卡顿；下面使用 element 中的 el-table 实现一下虚拟滚动来解决这个问题。
elementUi滚动条的使用及设置滚动条一直显示
热门推荐
haogemr的博客
04-27 1万+
elementUi滚动条的使用及设置滚动条一直显示
解决设置scrollTop不起作用
weixin_45700321的博客
04-23 2594
我操作是 $(#el-tree)的目标，给它设置了半天scrollTop始终不生效，因此排查问题所在，才知道需要找到滚动条目标层级，进行动态设置scrollTop，问题解决。首先场景是一个异步树：支持模糊搜索，当搜索到结果时，会有选中效果，但是搜索的结果可能会超出树的显示范围，因此需要手动滑动滚动条到选中位置。但是呢，树节点太多，无法及时到目标位置，因此根据选中位置，将滚动条滑动到目标位置，设置scrollTop。注意：offsetTop 就是当前选择节点的属性，以及注意overflow设置为 auto。
解决给元素设置scrollTop但不生效问题
kwroi的博客
11-15 3737
scrollTop
vue3 + element-plus 设置表格自动滚动
henudxk的博客
07-06 3695
el-table 中设置 ref，用来获取元素，必须设置高度才可以滚动，鼠标放上停止自动滚动，可手动滚动，鼠标离开自动滚动。
vue3 +Element-puls ,使用ref修改scrollTop 到指定位置
qq_45913170的博客
11-29 1405
【代码】vue3 +Element-puls ,使用ref修改scrollTop 到指定位置。
Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio
最新发布
m0_73179389的博客
06-19 659
前端页面使用的elment-plus的el-upload组件。当上传文件后，会调用handleChange 方法，可以在这里进行文件相关的操作。计算文件的MD5值。
this.$refs.scroll.setScrollTop(this.$refs.log.clientHeight) 改为ts写法
12-11
以下是将代码改为TypeScript写法的示例： ```typescript this.$refs.scroll.setScrollTop(this.$refs.log.clientHeight); ``` 需要注意的是，TypeScript是JavaScript的超集，因此大部分JavaScript代码都可以直接转换为TypeScript代码。在这个示例中，我们只需要将代码放入TypeScript文件中即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值