element ui table scrollTop 滚动到行头或行尾

最新推荐文章于 2024-06-03 16:20:55 发布
最新推荐文章于 2024-06-03 16:20:55 发布
阅读量9.3k 收藏 3
点赞数 5
分类专栏： vue element ui 文章标签： element ui table scrollTop 滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lynxkor/article/details/78069661
版权

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

各搜索引擎搜了好久都没有找到相对有效的方法；

后来经过分析发现其实是一件非常简单的事儿；

以下为最后的解决方法，非常的简单，方便；


滚动到第一行：

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

滚动到最后一行：

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

在此记录一下，希望能给后来者提供一些帮助

山貓
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
element的el-table中记录滚动条位置的示例代码
12-30
场景重现：在项目中使用了keep-alive来缓存组件，且使用element中的table列表，但在项目中是对table进行了二次封装，跟页码合在了一起。按照网上的直接对scrollTop赋值，赋值失败了，还要加上setTimeout才能成功，虽然实现了功能，但是不知道原因，可以的话希望有人能解答。 废话少说，直接赋上代码。 ... <wp-pager @page-change=pageChange :total=total v-if=
监听element-ui table滚动事件的方法
10-17
本文将详细介绍如何监听Element-UI的Table组件的滚动事件，以便在用户滚动到表格底部时动态加载更多数据。 ### 背景 在大数据展示场景中，为了提高页面性能和用户体验，通常会采用分页或无限滚动的方式来加载数据。...
vue3+element-plus, 设置table表格滚动到最底部
csdn_cai_csdn的博客
12-13 1188
【代码】vue3+element-plus, 设置table表格滚动到最底部。
element-ui el-tab-pane 最后一个tab显示不完全引出的问题
weixin_43996255的博客
06-03 166
这个时候遇到的问题是，在最后一个写死的el-tab-pane上绑定style和class都没有效果，最后只能通过伪类的方式添加样式。方式二：在tab最后添加一个任意内容的tab，将其设为不可见。但这样tab文字到顶部的距离会增加，也没有找到解决方案。tab过多，右滑到最后时，最后一个tab的内容无法显示完全。
vue+element-ui中 el-table添加数据后滚动到行前行尾
喜欢分享,善于记录工作中遇到的问题,和自己的思考
05-24 1422
1 table添加ref属性 <el-table ref="table" :data="form.items" height="300" style="width: 100%"> // 滚动到第一行 this.$refs.table.bodyWrapper.scrollTop =0;​​​​​​​ // 滚动到最后一行 this.$refs.table.bodyWrapper.scrollTop =
el-table自动滚动到最底部
chunmeizhang_88的博客
12-22 4609
现有需求, 使用element-ui中el-table进行开发一个分组业务组件, 可以新增分组, 分组展示列表的最大高度160, 列表数量超过4条则显示滚动条 添加分组功能, 点击新建分组, table的列表数据新增一条, 列表数量过多, 无法显示; 期望: 列表数量过多, 点击新增, 自动滚动到新增那条数据所在的位置 业务代码 //添加分组 addGroupItem() { const newRow = { groupName: '',
element Plus table表格定位滚动到指定行
qq_44871531的博客
02-06 4106
element Plus table表格定位到指定行
scroll到页面顶部 和 element ui table scrollTop 滚动到行头
吃瓜群众的博客
01-21 4166
&lt;el-table ref="multipleTable" ......&gt; &lt;slot&gt;&lt;/slot&gt; &lt;/el-table&gt; 一、table滚动到行头 this.$nextTick(() =&gt; { this.$refs.multipleTable.bodyWrapper.scrollTop = 0; ...
Vue Element表格实现滚动加载
李公子的博客
04-25 3797
需求背景 最近有个需求，需要根据用户输入的数字，生成对应行数的表格数据，比如输入10，那就是要生成一个10行的表格，1000就是1000行，表格内容不算复杂，感觉还是一个蛮简单的需求，谁知做着就发现问题了。就是当输入的数字超过1000的时候，明显感觉表格加载的有点卡顿，于是开始寻找解决之法。 解决思路 首先查看生成1000行表格数据所需的时间，由于计算过程是由js实现的，所以可以用 console.time('time') console.timeEnd('time'); 来查看代码执行耗时，time和
vue element-ui table表格滚动加载方法
08-27
Vue Element-UI 表格滚动加载方法 在本文中，我们将探讨使用 Vue 和 Element-UI 实现表格滚动加载的方法。本方法可以帮助开发者实现表格的无限滚动加载，提高用户体验。 一、添加全局注册事件 在实现表格滚动加载...
vue表格滚动懒加载
weixin_51501187的博客
06-30 601
直接上代码，粘贴即用。
vue+elementUI实现表格滚动加载
黑玫瑰
04-29 743
简单粗暴，直接上代码 el-table-loadmore/index.js文件 const vueClearIndex = {} /* * element 表格实现滚动加载 */ vueClearIndex.install = Vue => { Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper')
ant design vue中table表格滚动加载
weixin_71329368的博客
07-17 3790
在ant design vue组件库中，并没有提供可以直接监听table滚动的api，在此我使用了原生js去对table表格赋予一个监听表格滚动事件。在处理一写数据量特别大的情况下，我们不能把后端的数据一次性全部拿到前端在table表格中展示，为了考虑性能优化，使用了滚动加载表格数据。做这个功能之前，我们首先需要获取到table滚动到底部或者顶部时去触发方法。首先我想要对表格进行滚动加载，接口需要我传递的数据为行数，传递了行数来规定从第几行开始返回部分数据，具体返回数据的条数需要根据接口来定。
element 表格自动滚动加载数据_表格滚动加载的问题
weixin_39713335的博客
11-30 1408
今天老大让我给之前的表格添加表格滚动加载，而且还要固定表头，第一感觉就是先到element-ui的官网例子看看，固定表头主要用到了 height 这个属性，还有最大高度这个属性max-height 主要是设置超过这个高度就会出现滚动条，height 是设置表格的高度，让表格的表头固定在最上面。只要在el通过设置max因为我们是第二次封装 element-ui 的一些组件，需要哪些方法，属性，就足够...
elementUI 表格滚动分页加载请求数据
fanyanjiang的博客
07-24 1474
需求：elementui Table表格滚动分页（不使用分页组件），请求数据。1、自定义加载更多数据的指令，在utils文件夹中创建 loadMore.js。2、在main.js中添加以下代码。
el-table实现表格滚动上拉加载更多(Vue3)
qq_48665028的博客
03-20 785
【代码】el-table实现表格滚动上拉加载更多(Vue3)
vue el-table添加数据后自动定位到行前行尾，el-table添加数据后滚动到行前行尾
热门推荐
Dream_xun的专栏
12-19 1万+
el-table 添加数据行后定位到最后一行(滚动条滚动到对应的行头或行尾)问题 滚动到第一行： this.$refs.table.bodyWrapper.scrollTop =0;​​​​​​​ 滚动到最后一行： push进table绑定的数据源后定位到最后一行 //验证产品类型是否一致：是就可以添加，否则提示错误 if(valid){ ...
列表、表格滚动到底部加载数据方案
Rex的博客
05-06 908
滚动加载是前端经常遇到的业务场景，主要是实现列表的加载，其实质跟分页没多大区别，如果不是特别要求，可以使用分页替代，综合性能和用途做以下几种方案。
element ui 树形结构table 行吸顶
最新发布
06-25
Element UI 提供了一个灵活的表格组件 `ElTable`，它支持树形数据的展示。如果你想实现行吸顶效果，即当滚动到某一行时，该行会始终保持在视口顶部，可以使用虚拟滚动和自定义的滚动事件来实现。以下是基本步骤： 1. 使用 `tree-props` 属性配置树形结构：首先，你需要设置 `data` 为树形数据，并配置 `tree-props`，告诉 Element UI 数据的父级和子级关系。 ```javascript <el-table :data="treeData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" > <!-- ... --> </el-table> ``` 2. 配置虚拟滚动：启用虚拟滚动 (`:virtual-scroll`) 可以提高表格性能，特别是数据量大时。 ```javascript <el-table :virtual-scroll="true" /> ``` 3. 自定义滚动事件：在 `mounted` 或 `created` 生命周期钩子中监听滚动事件，并检查滚动条位置，如果当前行不在视口中，将其滚动到顶部。 ```javascript export default { mounted() { this.handleScroll(); window.addEventListener('scroll', this.handleScroll); }, beforeDestroy() { window.removeEventListener('scroll', this.handleScroll); }, methods: { handleScroll() { const { scrollTop, clientHeight, scrollHeight, scrollElement, rowHeight } = this.$refs.table; if (scrollTop + clientHeight >= scrollHeight) { const currentRow = this.currentRow || {}; // 假设你有一个当前行的变量 const targetIndex = this.treeData.findIndex(item => item === currentRow); if (targetIndex !== -1) { const targetRow = this.treeData[targetIndex]; scrollElement.scrollTop = targetRow.offsetTop - rowHeight; // 吸顶处理 } } } } } ``` 记得在适当的时候更新 `currentRow` 变量，比如当用户点击或选中某一行时。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值