el-table 表格从下往上滚动,触底自动请求新数据

关键点:

1、 el-table 需要设置高度 height;

2、el-table 外层盒子需要设置一个高度,并且设置 overflow:hidden;

3、获取 el-table 的 bodyWrapper:divData

      divData.scrollTop + divData.clientHeight + 1 >= divData.scrollHeight;(触底)

      重新请求数据;并将列表置顶:设置 divData.scrollTop = 0;

4、为el-table 添加鼠标移入移除事件,启停滚动;

<!--* @Author: xxx* @objectDescription: 滚动、合并行table* @Date: 2024-04-16 14:35:58
-->
<template><div class="span-roll-table"><div class="table-contain"><el-tableref="rollTable":data="list"height="100%":span-method="objectSpanMethod":header-cell-style="{textAlign: 'center',width: 'fit-content',backgroundColor: '#F2F6FC',}"class="table"@mouseenter.native="stopScroll"@mouseleave.native="startScroll"></el-table></div></div>
</template><script>
export default {data() {return {list: [],rollTimer: null,};},mounted() {this.startScroll();},methods: {// 获取新数据async onChange() {this.list = [{name: "1",},{name: "2",},{name: "3",},{name: "4",},];// 将列表置顶this.$nextTick(() => {const table = this.$refs.rollTable;const divData = table.bodyWrapper;divData.scrollTop = 0;});},// 开始滚动startScroll() {this.tableScroll(false);},// 停止滚动stopScroll() {this.tableScroll(true);},// 列表滚动tableScroll(stop) {if (stop) {if (this.rollTimer) {clearInterval(this.rollTimer);return;}}const table = this.$refs.rollTable;const divData = table.bodyWrapper;this.rollTimer = setInterval(() => {divData.scrollTop += 2;this.$nextTick(() => {if (divData.scrollTop + divData.clientHeight + 1 >=divData.scrollHeight) {this.onChange();}});}, 200);},// 合并列表第一个单元格(并列排名)objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {// 获取当前单元格的值(单元格项一定要配置 prop 属性,否则拿不到值!!!!)const currentValue = row[column.property];// 获取上一行相同列的值const preRow = this.typeTableData[rowIndex - 1];const preValue = preRow ? preRow[column.property] : null;// 如果当前值和上一行的值相同,则将当前单元格隐藏if (currentValue === preValue) {return { rowspan: 0, colspan: 0 };} else {// 否则计算当前单元格应该跨越多少行let rowspan = 1;for (let i = rowIndex + 1; i < this.typeTableData.length; i++) {const nextRow = this.typeTableData[i];const nextValue = nextRow[column.property];if (nextValue === currentValue) {rowspan++;} else {break;}}return { rowspan, colspan: 1 };}}},},beforeDestroy() {clearInterval(this.rollTimer);this.startScroll = () => {};},
};
</script>
<style lang="less" scoped>
.span-roll-table {height: 400px;.table-contain {height: 100%;overflow: hidden;}
}/* 隐藏滚动条,但仍然可以滚动 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {display: none; /* 针对Webkit浏览器 */
}
</style>

参考文章

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

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

相关文章

C++_类型转换

文章目录 学习目标&#xff1a;1.static_cast2. reinterpret_cast3.const_cast4. dynamic_cast 学习过程1.static_cast2. reinterpret_cast3.const_cast在这里插入图片描述4. dynamic_cast 学习目标&#xff1a; 标准C为了加强类型转换的可视性&#xff0c;引入了四种命名的强…

mysql 查询实战3-解答

对mysql 查询实战3-题目&#xff0c;进行一个解答 11、查询每⽉产品交易与退款情况 目标&#xff1a;查询每⽉产品交易&#xff08;交易总额&#xff0c;交易数&#xff09;与退款情况&#xff08;退款总额&#xff0c;退款数&#xff09; 1&#xff0c;先把日期格式化 使用 E…

200.trie前缀树

Trie树常用于自动补全&#xff0c;拼写检查&#xff0c;单词搜索&#xff0c;高频统计等领域&#xff0c;一般都是这个模板再加个次数 介绍 题解

STM32直接存储器存取DMA

前提知识&#xff1a; 1、STM32F103内部存储器结构以及映射 STM32F103的程序存储器、数据存储器、寄存器和IO端口被组织在同一个4GB的线性地址空间内。数据字节以小端模式存放在存储器中。即低地址中存放的是字数据的低字节&#xff0c;高地址中存放的是字数据的高字节 可访问…

用Python在PDF文档中插入单图像水印和平铺图像水印

PDF文档因其跨平台兼容性和内容保真度成为信息交换的标准载体&#xff0c;为应对版权侵犯、内容篡改以及未经授权的传播等风险&#xff0c;向PDF中插入图片水印成为一种强化文档安全性、彰显所有权及实施访问控制的有效手段。图片水印不仅能以直观的方式标示文档来源、强化版权…

CH58X使用USB HID进行IAP注意事项——笔记

CH58X使用USB HID进行IAP注意事项——笔记 一、背景 基础 单片机使用CH582M&#xff0c;并使用USB HID进行IAP升级。方案 方案1&#xff1a;APPBOOT方案&#xff0c;可以只安装APP就可以运行&#xff0c;APP中后续安装BOOT程序和后面更新也方便。 方案2&#xff1a;经典IAP方…

Windows:web端UI自动化=python+selenium+pycharm框架

本篇写怎么写一个UI自动化代码。mac和Windows是一样的 都是这样写 不过&#xff0c;习惯用Windows了 如果python没有安装可以看我另一篇安装python的教程 先安装python先 下载完python 下载pip 1 安装pip $ curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py # 下载…

【centso】sqlite3.7.17升级到更新的版本

下载 创建一个工作目录(非必须) mkdir sqlite3_upgrade cd sqlite3_upgrade下载源码包(官网&#xff1a; https://sqlite.org/download.html) wget https://www.sqlite.org/2020/sqlite-autoconf-3320300.tar.gz #或者 wget https://docs.iterdaily.com/sqlite-autoconf-332…

SpringBoot上传文件夹

SpringBoot上传文件夹 SpringBoot上传文件夹 SpringBoot上传文件夹前言前端后端FileControllerFilesUtil 前言 个人开发过程中的经验总结 前端 此处以vue3为例 <template><form submit.prevent"uploadFiles" ref"form"><inputtype"…

Sentinel + Nacos流控规则持久化配置

json参数对映sentinel 规则面板 [{"controlBehavior": 0,"count": 2,"grade": 1,"limitApp": "default","resource": "flow","strategy": 0} ] 第二步&#xff0c;告诉订单服务读取配置&…

Golang | Leetcode Golang题解之第38题外观数列

题目&#xff1a; 题解&#xff1a; func countAndSay(n int) string {prev : "1"for i : 2; i < n; i {cur : &strings.Builder{}for j, start : 0, 0; j < len(prev); start j {for j < len(prev) && prev[j] prev[start] {j}cur.WriteStr…

Ubuntu的终端中启用鼠标左键即为选中复制,右键粘贴的功能

在Ubuntu终端中启用鼠标复制和粘贴的功能需要进行一些设置。 首先&#xff0c;打开终端窗口&#xff0c;在菜单栏中找到“Edit”选项&#xff0c;点击“Profile Preferences”。然后&#xff0c;在“General”选项卡中&#xff0c;勾选“Use custom font”选项&#xff0c;可以…

Excel中将单元格格式改成文本后,为何要双击数字才会改变?

将大批量的数值型数字转换成文本型数字&#xff0c;当然不能一个一个的去双击做转换了。以下说说有哪个可以将数值型数字转换成文本型数字的方法。 一、转换方法 方法1.数据分列功能 选中数据后&#xff0c;点击数据选项卡&#xff0c;分列&#xff0c; 分列向导的第一步和…

Transformer推理性能优化技术很重要的一个就是K V cache,能否通俗分析,可以结合代码?

原文&#xff1a;Transformer推理性能优化技术很重要的一个就是K V cache&#xff0c;能否通俗分析&#xff0c;可以结合代码? - 知乎 为什么要研究KV cache&#xff1f; 设输入序列的长度为 s &#xff0c;输出序列的长度为 n &#xff0c;模型深度为l&#xff0c;维度为h,以…

【Taro3踩坑日记】不存在全局配置文件:C:\Users\TYW\.taro-global-config\index.json

鼠鼠想用Taro做一个完整的移动端和小程序项目&#xff0c;结果出师未捷&#xff0c;就遇到个坑。 taro init myApp之后&#xff0c;直接报错&#xff1a;不存在全局配置文件&#xff1a;C:\Users\TYW.taro-global-config\index.json 经过多方查找&#xff0c;有的说要安装taroj…

设计模式:简单工厂模式(Simple Factory)

设计模式&#xff1a;简单工厂模式&#xff08;Simple Factory&#xff09; 设计模式&#xff1a;简单工厂模式&#xff08;Simple Factory&#xff09;模式动机模式定义模式结构时序图模式实现测试模式分析实例&#xff1a;Qt 控件类优缺点适用环境模式应用 设计模式&#xff…

关基网络战时代,赛宁网安电力网络攻防靶场全面提升电网安全防护力

随着网络空间成为与陆地、海洋、天空、太空同等重要的人类活动新领域&#xff0c;自网络空间向物理电网发起攻击&#xff0c;破坏电力等国家关键基础设施成为当前大国博弈、大规模战争的重要手段和常态进攻形式。同时&#xff0c;新型电力系统建设发展驱动电力系统形态和控制方…

基于Springboot的社区待就业人员信息管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的社区待就业人员信息管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三…

TaskWeaver使用记录

TaskWeaver使用记录 1. 基本介绍2. 总体结构与流程3. 概念细节3.1 Project3.2 Session3.3 Memory3.4 Conversation3.5 Round3.6 Post3.7 Attachment3.8 Plugin3.9 Executor 4. 代码特点5. 使用过程5.1 api调用5.2 本地模型使用5.3 添加插件 6. 存在的问题与使用体验6.1 判别模型…

Docker搭建nano-wallet

nano-wallet 是一个Docker镜像&#xff0c;用于运行Nano cryptocurrency的钱包服务。Nano是一种去中心化的数字货币&#xff0c;使用了区块链技术来提供快速且无交易费用的支付服务。使用该Docker镜像可以方便地在各种环境中部署Nano钱包服务&#xff0c;便于执行交易、查看账户…