【elementUi-table表格】 滚动条 新增监听事件; 滚动条滑动到指定位置;

1、给滚动条增加监听

        this.dom = this.$refs.tableRef.bodyWrapperthis.dom.scrollTop = 0let _that = thisthis.dom.addEventListener('scroll', () => {//获取元素的滚动距离let scrollTop = _that.dom.scrollTop//获取元素可视区域的高度let clientHeight = this.dom.clientHeight//获取元素滚动条的高度let scrollHeight = this.dom.scrollHeightif (scrollTop + clientHeight == scrollHeight) {//不是获取全部数据,而是加载新的数据}console.log(`scrollTop:  ${scrollTop}`)console.log(`clientHeight:  ${clientHeight}`)console.log(`scrollHeight:  ${scrollHeight}`)})

在这里插入图片描述

2、滚动条滑动到指定为止

只需要给scrollTop 赋值就行了

//滚动条滑动到指定位置
this.dom.scrollTop = this.dom.scrollHeight + 300

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/485421.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue实现拖拽(vuedraggable)

实现效果: 左侧往右侧拖动,右侧列表可以进行拖拽排序。 安装引用: npm install vuedraggable import draggable from vuedraggable 使用: data数据: componentList: [{groupName: 考试题型,children: [{componentType: danxua…

Ansible安装管理和模块的使用

目录 Ansible是什么 ansible 环境安装部署 管理端安装 ansible ansible 目录结构 配置主机清单 配置密钥对验证 ansible 命令行模块 1.command 模块 在远程主机执行命令,不支持管道,重定向等shell的特性 常用的参数 2.sh…

bat 查找文件所在

脚本 在批处理文件(.bat)中查找文件所在的目录,你可以使用dir命令结合循环和条件语句来实现。以下是一个简单的示例,演示如何在批处理文件中查找指定文件并输出其所在目录: echo off setlocal enabledelayedexpansio…

Elasticsearch从入门到精通-01认识Elasticsearch

Elasticsearch从入门到精通-01认识Elasticsearch 👏作者简介:大家好,我是程序员行走的鱼 🍂博主从本篇正式开始ES学习,希望小伙伴可以一起探讨 📖 本篇主要介绍和大家一块简单认识下ES并了解ES中的主要角色…

MySQL 窗口函数温故知新

本文用于复习数据库窗口函数,希望能够温故知新,也希望读到这篇文章的有所收获。 本文以:MySQL为例 参考文档: https://www.begtut.com/mysql/mysql-window-functions.html 使用的样例数据:https://www.begtut.com/m…

vue3新特性-defineOptions和defineModel

defineOptions 背景说明&#xff1a; 有 <script setup> 之前&#xff0c;如果要定义 props, emits 可以轻而易举地添加一个与 setup 平级的属性。 但是用了 <script setup> 后&#xff0c;就没法这么干了 setup 属性已经没有了&#xff0c;自然无法添加与其平…

R语言【base】——abs(),sqrt():杂项数学函数

Package base version 4.2.0 Description abs(x) 计算 x 的绝对值&#xff0c;sqrt(x) 计算 x 的正平方根。 Usage abs(x) sqrt(x) Arguments 参数【x】&#xff1a;一个数值或复数向量或数组。 Details 这些都是内部泛型原语函数:可以为它们单独定义方法&#xff0c;也可以…

IDEA启动Springboot报错:无效的目标发行版:17 的解决办法

无效的目标发行版&#xff1a;17 的解决办法 一般有两个原因&#xff0c;一可能是本地没有安装JDK17&#xff0c;需要安装后然后在IDEA中选择对应版本&#xff1b;二可能是因为IDEA版本太低&#xff0c;不支持17&#xff0c;需要升级IDEA版本。然后在File->Project Struct…

【Java EE初阶二十】http的简单理解(一)

1. 初识http HTTP 最新的版本应该是 HTTP/3.0&#xff0c;目前大规模使用的版本 HTTP/1.1&#xff1b; 下面来简单说明一下使用 HTTP 协议的场景: 1、浏览器打开网站 (基本上) 2、手机 APP 访问对应的服务器 (大概率) 前面的 TCP与UDP 和http不同&#xff0c;HTTP 的报文格式&a…

Mybatis Plus 打印 SQL 语句(包含执行耗时)

文章目录 一、前言二、引入依赖三、添加配置3.1 第一步&#xff1a;修改 application.yml 配置文件3.2 第二步&#xff1a;添加 p6spy 配置文件 四、看看打印效果五、注意点 一、前言 我们先配置一下 Mybatis Plus 打印 SQL 功能&#xff08;包括执行耗时&#xff09;&#xf…

vue : 无法加载文件 C:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。

解决方法&#xff1a; 打开PowerShell&#xff0c;在命令框输入set-ExecutionPolicy RemoteSigned 在PowerShell中输入会出现如下图&#xff0c;输入y即可。

vue源码分析之nextTick源码分析-逐行逐析-错误分析

nextTick的使用背景 在vue项目中&#xff0c;经常会使用到nextTick这个api&#xff0c;一直在猜想其是怎么实现的&#xff0c;今天有幸研读了下&#xff0c;虽然源码又些许问题&#xff0c;但仍值得借鉴 核心源码解析 判断当前环境使用最合适的API并保存函数 promise 判断…