关于elementui分页点击后置顶（仅限于嵌套子组件并置顶子组件的方法）

最新推荐文章于 2024-08-13 20:25:30 发布
原创 最新推荐文章于 2024-08-13 20:25:30 发布 · 672 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在钩子函数中使用ref和handleScroll方法来监听子组件的滑动距离，并探讨了置顶操作的正确实现方式。文章指出，handleScrollBack方法应放置于请求数据后的函数中，而不是分页标签组件的方法内。

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

钩子函数中使用ref 和 hanndleScroll方法来监听子组件的滑动距离。

handleScrollBack用于置顶操作，此方法需加在发送请求获取数据后的函数中。不应加在分页标签组件的方法中（问题所在：切换每页显示几行时，由于滚动距离会发生改变【又小变大】，因此置顶失效）！！

切记添加到相关的请求中

Python语言基础原理与代码实战案例讲解
AI天才研究院
06-02 680
Python语言基础原理与代码实战案例讲解 1.背景介绍 Python是一种高级编程语言,由Guido van Rossum于1991年首次发布。Python以其简洁、易读、易学的语法特点,成为了当今最受欢迎的编程语言之一。Python广泛应用于Web开发、数据分析、人工智能、科学
分页置顶逻辑设计
vilin_FHSI的博客
09-17 762
在查询效期规则列表的时候增加了这样一条需求：规则按照最后修改时间倒序排序，通用规则第一页置顶展示，分页查询。 在增加这条需求之前：按照规则id升序排序，通用规则不置顶，分页查询。 涉及到三张表：expiry_rule_info expiry_rule_detail expiry_rule_poi 已知：芥末端和协同仓各有一条通用规则，查询规则列表的时候传入的参数有平台类型和仓库id，其中仓库id是选传的。当只传平台类型的时候查询当前平台下的所有规则，当传平台类型和仓id的时候查询作用于该仓的所有规则。
elementUI 表格翻页后，滚动条回到顶部
sinat_21389349的博客
05-19 2451
elementUI 表格翻页后，滚动条回到顶部 elementUI 表格翻页后，滚动条回到顶部 在页面翻页触发的方法后面添加（记得现在table上添加 ref=‘table’） this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0 }) ...
Element Plus el-table 换页后返回顶部
许失之的笔记
02-25 1693
废话不多说，直接上代码： <el-table ref="table" ></el-table> this.$refs.table.$refs.scrollWrapper.setScrollTop(0); 打印出来各种看，终于找到，亲测有效~~
vue（九）：elementUI分页插件的插槽slot的用法
热门推荐
Fiona_lms的博客
08-02 1万+
这几天在做一个管理系统，然后遇到了一个分页的问题，因为一开始就是用vue结合elementui开发的，所以分页就用到了elementui的分页功能，但是官网给的例子不符合我开发的需求，所以呢，就需要进行改造，关键是怎么改造呢， 重点来了slot插槽 上面的图片， 展示的是我这次要实现的效果，我看了官网的，有一个跟我的很像，但还是有区别 现在呢，我们就根据这个代码进行改造哈 直接附上...
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
12-09
调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style media="screen" type="text/css"> #appLoading { width: 100%;
易语言源码易语言复制组件到指定子夹源码.rar
03-31
为了实现组件的批量复制，我们需要遍历组件所在的目录，获取所有组件文件，并依次进行复制操作。 以下是一个简单的示例，展示如何使用易语言实现组件复制功能： ```易语言 .定义 变量 文件列表 为 列表框 .定义 ...
搜狗语音滚动条置顶子控件的实现与应用
滚动条通常包含滑块（也称为滚动框、滚动条把手），用户可以通过拖动滑块快速定位内容，或是通过点击滚动条两端以及滑块两侧的区域来逐步滚动。 2. 置顶显示子控件的原理 在实现滚动条让某个子控件置顶显示时，需要...
[HarmonyOS Next示例代码]Scroll组件嵌套滑动
最新发布
Alexzhang369学习总结空间
08-13 577
该示例通过nestedScroll属性，实现了上滑Scroll容器，滑至Tabs子组件处，Tabs吸顶，List子组件中内容可继续滑动的功能。
大顶子山航电枢纽变动回水区航道整治试验研究 (2007年)
05-17
### 大顶子山航电枢纽变动回水区航道整治试验研究 #### 一、背景与研究目的 大顶子山航电枢纽位于特定的地理环境中，其变动回水区河段面临着年际、年内来水及来沙不均匀的问题。这种自然条件的变化对航道的稳定性...
jquery分页点击后页面置顶
weixin_34303897的博客
11-11 200
前台： 1 <a href="#" ><span id='top'></span></a> js中： 放在分页事件后，数据加载完成后 js的 后面；$('#top').trigger('click'); //trigger 是模拟点击事件，本人试过了 前台换成<a href="#" id='top'> </a&...
element表格翻页后回到顶部
小白白的博客
02-15 747
element表格翻页后回到顶部
vue+element ui列表使用分页组件 翻页的时候返回页面顶部
小猫爪子
06-16 3591
此时滚动条已经翻到页面底部，更换上一页或者下一页时，重新回到页面顶部。 // 翻页后滚动条回到页面顶端 scrollTop(selector) { let element = selector && document.querySelector(selector) || window; element.scrollTo(0, 0); }, //切换页面 currentChangeHandle(val) { this.pageIndex = val //找到你想要滚到
Element ui分页切换页面回到顶部
weixin_43585219的博客
12-20 1375
document.querySelector(".body").parentNode.scrollTop=0 针对这一行 1、document.querySelector（）方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。 2、由此可以获取元素的DOM节点 3、scrollTop为滚动条的垂直偏移，是拥有滚动条元素的属性，如下，切换页数时，若想使列表回到顶部，其拥有scrollTop的元素为el-main，而不是列表本身
element-plus 表格翻页之后滚动条回到顶部
niyooooo的博客
04-12 2483
给el-table添加属性ref="tableRef"，再将这个ref对象创建出来 let tableRef = ref(null); 最后在翻页触发的事件中写 tableRef.value.setScrollTop(0);
elementUI实现用卡片展示不同内容表单，合并第一列相同内容，并使合并列内容置顶
qq_42314621的博客
07-03 1763
也就是数组中有两个子数组，类似这样的数据我想把name为a的数据单独用一个卡片嵌套表单的形式展示出来,name为b的数据则用另一个卡片嵌套表单显示，以此类推显示所有数据，然后把name列合并，并把name值置顶。首先我获取了trackData之后，则要将trackData的数据进行遍历，得到合并索引数组，然后再通过table的span-method实现合并列,然后我们就得到了合并索引数组spanArr，接下来对几个表单数据进行合并，有一个关键就是要获取表单数组在trackData中的索引，可以通过。
elementUI table 表头吸顶效果
m0_66743830的博客
07-10 6136
elementUI table 表头吸顶效果
vue elementui中使表的滚动条 滚到顶部或底部
u012970538的博客
09-14 3210
1.设置table的ref为tableList。
Element 页面滚动表头置顶
分享前端工程化、动效魔法与性能之舞！
06-26 1106
在开发后台管理系统时，表格是最常用的一个组件，为了看数据方便，时常需要固定表头。 如果页面基本只有一个表格区域，我们可以根据屏幕的高度动态的计算出一个值，给表格设定一个固定高度，这样表头就可以固定了。 但是如果表格上面还有其它区域，这样动态计算出表格的高度时还要减去其它区域的高度，因此计算出的表格的高度就会非常小，看数据特别不方便，此时就不能给表格设置一个固定高度了，但是这样一页数据很多时，滚动页面到底部，表头就被滚动隐藏了，为了用户体验好一点......
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值