element-plus 表格翻页之后滚动条回到顶部

最新推荐文章于 2024-07-21 13:23:50 发布
最新推荐文章于 2024-07-21 13:23:50 发布
阅读量2k 收藏 4
点赞数 4
分类专栏： vue3相关 文章标签： elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niyooooo/article/details/124118832
版权

给el-table添加属性ref="tableRef"，再将这个ref对象创建出来

let tableRef = ref(null);

最后在翻页触发的事件中写

tableRef.value.setScrollTop(0);

Beesia
关注
专栏目录
element-plus 表格翻页后，滚动条回到顶部
WY_LJN的博客
01-21 1123
element-plus 表格 el-table 翻页后，滚动条回到顶部。 tableRef.value.layout.table.refs.tableWrapper.childNodes[0].childNodes[2].scrollTop = 0 感觉不如document.getElementByClassName方便 document.getElementsByClassName('el-table__body-wrapper')[0].scrollTop = 0 这两种方式都很不优雅，应该也有其
element Plus table表格定位滚动到指定行
qq_44871531的博客
02-06 4825
element Plus table表格定位到指定行
vue elementUI中 el-table 如何在切换页码让滚动条回到顶部或底部
weixin_58586234的博客
07-21 790
使用el-table显示数据，当滚动到最底部，再点击切换分页时，回显过来数据后，滚动条依然在页面底部。
vue3项目使用element plus 中的el-scrollbar跳转页面后滚动条还是上个页面的位置
NICKDL的博客
07-07 1024
【代码】vue3项目使用element plus 中的el-scrollbar跳转页面后滚动条还是上个页面的位置。
【Element-plus】el-table新增数据后自动滚到表格的底部或顶部
weixin_40057665的博客
06-19 550
【代码】【Element-plus】如何让滚动条永远在最底部。
vue3 +Element-puls ,table 中使用$refs修改scrollTop 到顶部
weixin_39475476的博客
12-09 3014
const elTableRef = ref(); //表格id
解决element-ui中的el-table中列更新问题以及滚动条会重置到最顶部的问题
Wang__dream的博客
12-19 7259
解决elementui中el-table列行或列数据更新的问题，例如滚动条会重置到最顶部
element-plus(element-plus@2.5.5) 本地离线资源
02-05
element-plus@2.5.5 本地离线资源，适用于没有网络连接、搭建自己的cdn等用途。 All files（包含文件） /npm/element-plus@2.5.5/dist /npm/element-plus@2.5.5/es /npm/element-plus@2.5.5/lib /npm/element-...
element-plus(element-plus@2.8.1/element-plus-2.8.1) 本地离线资源
最新发布
08-27
/npm/element-plus@2.8.1/dist 37.2K /npm/element-plus@2.8.1/es 36.4K /npm/element-plus@2.8.1/lib /npm/element-plus@2.8.1/theme-chalk 394 /npm/element-plus@2.8.1/attributes.json /npm/element-...
vue-element-plus-admin 是一个基于 element-plus 免费开源的中后台模版
04-05
vue-element-plus-admin 是一个基于 element-plus 免费开源的中后台模版。使用了最新的vue3，vite4，TypeScript等主流技术开发，开箱即用的中后台前端解决方案，
element-plus-2.2.12 本地资源文件
08-01
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）
elementUI 表格翻页后，滚动条回到顶部
sinat_21389349的博客
05-19 2338
elementUI 表格翻页后，滚动条回到顶部 elementUI 表格翻页后，滚动条回到顶部 在页面翻页触发的方法后面添加（记得现在table上添加 ref=‘table’） this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0 }) ...
element-ui table 点击分页table滚到顶部
weixin_45561965的博客
04-19 744
使用table表格的时候，切换分页之后不会回到顶部，还是停留在之前滚动的位置。//切换分页的方法加上下面这句，table就能自动滚到顶部。设置table的 ref=‘multipleTable’在开发项目过程中遇到这样一个问题。看到这如果帮到你了留个小心心吧。
vue elementui中使表的滚动条 滚到顶部或底部
u012970538的博客
09-14 2682
1.设置table的ref为tableList。
vue element点击分页，页面跳回顶部
蓦然回首，那人却在，灯火阑珊处。
03-10 1916
// 翻页后滚动条回到页面顶端 scrollTop (selector) { let element = selector && document.querySelector(selector) || window; element.scrollTo(0, 0); }, // 监听 页码值 改变的事件 handleCurrentChange (newPage) { // console.log(newPage);
element-ui的table组件的纵向滚动条在切换页码后回到顶部
冯少奇@的博客
04-23 995
el-table的纵向滚动条在切换页码后不自动回到顶部 给table标签添加ref=‘table’ 监听数据改变scrollTop值 this.$refs.table.bodyWrapper.scrollTop =0;
Element Plus el-table 换页后返回顶部
许失之的笔记
02-25 1394
废话不多说，直接上代码： <el-table ref="table" ></el-table> this.$refs.table.$refs.scrollWrapper.setScrollTop(0); 打印出来各种看，终于找到，亲测有效~~
给element-ui的table添加自己的滚动条
PK的博客
06-25 7594
element-ui的table表格的滚动条并不能满足我们实际的开发需求，特别是对于window用户来说，当表格超出屏幕范围时，每当要滑动时都需要滑到最底部才能滚动，很不方便。还有就是启用冻结效果后，滚动条被盖住的问题。本文就是为了解决这些问题，先看看实际效果。 1、效果 1、滑到底部时 2、未滑到底部时 效果还是很不错的，十分丝滑。 看了效果后直接开干吧。 2、操作流程 1、首先去除掉原有element-ui的滚动条 找到el-table__body-wrapper类，添加样式，这里也要考虑到兼容问题
element ui table 滚动条回到顶部、底部
zhanglianglily的博客
01-09 8985
element ui table 添加数据行后滚动条滚动到对应的行头或行尾问题； 滚动到第一行： this.$refs.table.bodyWrapper.scrollTop =0; 滚动到最后一行： this.$refs.table.bodyWrapper.scrollTop =this.$refs.table.bodyWrapper.scrollHeight; ------------...
element-plus infinite scroll修改滚动条样式
10-17
要修改 element-plus 的 infinite scroll 组件的滚动条样式，可以通过以下步骤实现： 1. 在项目中安装 `sass` 和 `sass-loader`，如果已经安装则可以跳过此步骤。 ``` npm install sass sass-loader --save-dev ``` 2. 在 `main.js` 中引入 `element-plus` 的样式文件和自定义的样式文件。 ```js import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import './assets/styles/element-plus.scss' // 自定义样式文件 createApp(App).use(ElementPlus).mount('#app') ``` 3. 在自定义的样式文件中，覆盖 `el-scrollbar` 和 `el-scrollbar__thumb` 的样式。 ```scss // 修改滚动条样式 .el-scrollbar { &__thumb { background-color: #409eff; border-radius: 4px; } } ``` 4. 在需要使用 infinite scroll 的组件中，设置 `element-loading-text` 属性为 `false`，以隐藏默认的加载提示。 ```html <el-infinite-scroll :element-loading-text="false" @load="loadMoreData" :distance="10" > <!-- infinite scroll 内容 --> </el-infinite-scroll> ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值