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

最新推荐文章于 2023-02-21 11:05:07 发布
最新推荐文章于 2023-02-21 11:05:07 发布
阅读量557 收藏 1
点赞数
分类专栏： 报错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37176498/article/details/111592144
版权

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

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

切记添加到相关的请求中

这名字怎么改不了呀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
分页置顶逻辑设计
vilin_FHSI的博客
09-17 608
在查询效期规则列表的时候增加了这样一条需求：规则按照最后修改时间倒序排序，通用规则第一页置顶展示，分页查询。 在增加这条需求之前：按照规则id升序排序，通用规则不置顶，分页查询。 涉及到三张表：expiry_rule_info expiry_rule_detail expiry_rule_poi 已知：芥末端和协同仓各有一条通用规则，查询规则列表的时候传入的参数有平台类型和仓库id，其中仓库id是选传的。当只传平台类型的时候查询当前平台下的所有规则，当传平台类型和仓id的时候查询作用于该仓的所有规则。
Element Plus el-table 换页后返回顶部
许失之的笔记
02-25 1239
废话不多说，直接上代码： <el-table ref="table" ></el-table> this.$refs.table.$refs.scrollWrapper.setScrollTop(0); 打印出来各种看，终于找到，亲测有效~~
elementUI 表格翻页后，滚动条回到顶部
sinat_21389349的博客
05-19 2300
elementUI 表格翻页后，滚动条回到顶部 elementUI 表格翻页后，滚动条回到顶部 在页面翻页触发的方法后面添加（记得现在table上添加 ref=‘table’） this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 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
为了实现组件的批量复制，我们需要遍历组件所在的目录，获取所有组件文件，并依次进行复制操作。 以下是一个简单的示例，展示如何使用易语言实现组件复制功能： ```易语言 .定义 变量 文件列表 为 列表框 .定义 ...
大顶子山航电枢纽变动回水区航道整治试验研究 (2007年)
05-17
大顶子山航电枢纽变动回水区河段年际、年内来水及来沙不均。定床模型试验提出了变动回水区河段航道以整治为主、疏浚为辅的整治原则，整治建筑物高度丁坝取0.5m锁坝取1.2m；变动回水区上段整治线宽度取300m，下段取...
吉林金龙顶子火山空降堆积物体积估算及其地质意义 (2006年)
05-15
用梯形法、对数坐标直线交叉法、厚度对数-面积平方根法对吉林龙岗金龙顶子火山四海期空降堆积物的体积进行了估算,结果分别为0.096km3，0.138km3，0.1095km3，与Los Alamos National Laboratory开发的火山喷发模拟...
吉林中部小蜂蜜顶子组火山岩的形成时代及其地质意义:锆石U-Pb年代学和Hf同位素组成证据 (2016年)
04-25
本文对出露于吉林省中部地区的小蜂蜜顶子组标准剖面的流纹岩(样品号:JH21-1)和非标准剖面小蜂蜜顶子组的安山岩(样品号:JX1-1)进行了锆石LA-ICP-MS U-Pb年代学以及Hf同位素组成研究。2个样品中的锆石均呈自形―半自形...
勋章制作素材包
12-29
勋章的制作素材包括：勋章模板，顶子上的素材以及特效的制作素材 勋章模板有5个，个人推荐第一个，大小，透明度上都比较好 GIF小图的东西比较多和繁杂，有时顶子的制作可以用GIF小图 这里有这种这样的素材，有一些...
jquery分页点击后页面置顶
weixin_34303897的博客
11-11 169
前台： 1 <a href="#" ><span id='top'></span></a> js中： 放在分页事件后，数据加载完成后 js的 后面；$('#top').trigger('click'); //trigger 是模拟点击事件，本人试过了 前台换成<a href="#" id='top'> </a&...
element表格翻页后回到顶部
小白白的博客
02-15 654
element表格翻页后回到顶部
vue+element ui列表使用分页组件 翻页的时候返回页面顶部
小猫爪子
06-16 3183
此时滚动条已经翻到页面底部，更换上一页或者下一页时，重新回到页面顶部。 // 翻页后滚动条回到页面顶端 scrollTop(selector) { let element = selector && document.querySelector(selector) || window; element.scrollTo(0, 0); }, //切换页面 currentChangeHandle(val) { this.pageIndex = val //找到你想要滚到
Element ui分页切换页面回到顶部
weixin_43585219的博客
12-20 1277
document.querySelector(".body").parentNode.scrollTop=0 针对这一行 1、document.querySelector（）方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。 2、由此可以获取元素的DOM节点 3、scrollTop为滚动条的垂直偏移，是拥有滚动条元素的属性，如下，切换页数时，若想使列表回到顶部，其拥有scrollTop的元素为el-main，而不是列表本身
element-plus 表格翻页之后滚动条回到顶部
niyooooo的博客
04-12 1977
给el-table添加属性ref="tableRef"，再将这个ref对象创建出来 let tableRef = ref(null); 最后在翻页触发的事件中写 tableRef.value.setScrollTop(0);
elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格，给表头换颜色。
weixin_37739550的博客
02-21 2549
4.渲染合计，sumObj是通过后端接口得到的对应字段的合计（对象数据）。在并在此处调用合并“合计”文字的单元格。3.使用vue.$el.querySelector()方法,table渲染时，调用封装好的合并方法。1.将show-summary设置为true就会在表格尾部展示合计行。2.借用样式将合计行置顶。
elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格。
qq_40639028的博客
07-07 4417
1.将设置为就会在表格尾部展示合计行。 2.借用样式将合计行置顶 3.使用vue.$el.querySelector()方法,table渲染时，调用封装好的合并方法。 4.渲染合计，sumObj是通过后端接口得到的对应字段的合计（对象数据）。在并在此处调用合并“合计”文字的单元格...
vue中使用element UI中的组件 回到顶部
yinge0508的博客
07-20 4736
开发框架是vue+webpack+element-ui，需要一个回到顶部的通用组件。 HTML:这里使用了一个进入动画 <template> <transition name="el-fade-in"> <div class="page-up" @click="scrollToTop" v-show="toTopShow"> &lt...
解决elementUI翻页后页面不回滚到最顶端
weixin_44567943的博客
07-13 5053
提供三种方式： 第一步是应该找到翻页对应的js方法。 第一种： 记得在table标签上面加ref=“table”,ref里面的要和$refs后面的一致 this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0 }) 不好使换下一个 第二种：原生的 let overflowY = this.$el.getElementsByClassName("el-table__body-wrapper")[0]; if (!overf
java中基本数据类型用equals比较
最新发布
07-13
因为基本数据类型不是对象，所以实际上是通过自动装箱将其转换为包装类对象来调用"equals()"方法进行比较。 例如，对于两个int类型的变量x和y： ```java int x = 5; int y = 5; System.out.println(x == y); // ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值