Element 页面滚动表头置顶

在开发后台管理系统时,表格是最常用的一个组件,为了看数据方便,时常需要固定表头。

如果页面基本只有一个表格区域,我们可以根据屏幕的高度动态的计算出一个值,给表格设定一个固定高度,这样表头就可以固定了。

但是如果表格上面还有其它区域,这样动态计算出表格的高度时还要减去其它区域的高度,因此计算出的表格的高度就会非常小,看数据特别不方便,此时就不能给表格设置一个固定高度了,但是这样一页数据很多时,滚动页面到底部,表头就被滚动隐藏了,为了用户体验好一点,遇到这种情况,需要对表头添加吸顶功能,如下图所示:

下面直接上代码:

<template><div><div class="app-container"><!-- 其它区域 --><div class="table-total"></div><!-- 表格主体 --><div class="table-container"><el-table :data="tableData" style="width:100%;"><el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column></el-table></div></div></div></template><script>export default {name: "index",data(){return{// 表格数据列tableColumn:[{label:"日期",prop:"date"},{label:"用户数",prop:"user"},{label:"充值金额",prop:"money"},{label:"充值人数",prop:"count"},],// 模拟数据项tableData:[]}},created(){let result = [];for(let i=0;i<100;i++){let item = {date:0,user:0,money:0,count:0};item.id=i+1;result.push(item);}this.tableData = result;},mounted(){window.addEventListener('scroll', this.handleScroll, true)},beforeDestroy() { window.removeEventListener('scroll', this.handleScroll, true)},methods: {handleScroll(e) {let scrollTop = document.getElementsByClassName('app-container')[0].scrollTop;let offsetWidth = document.getElementsByClassName('app-container')[0].offsetWidth - 43; // 43=>右侧滚动条加上外边距的宽度let headerWrapper = document.getElementsByClassName('el-table__header-wrapper')[0];let fixedWrapper = document.getElementsByClassName('el-table__fixed-header-wrapper');// 300=>为滚动区域内,除了表格以外,其它的区域高度if (scrollTop >= 300) { // 93=>为表头在吸顶时,距离屏幕顶部的位置headerWrapper.style.top = '93px';headerWrapper.style.zIndex = '2';headerWrapper.style.position = 'fixed';headerWrapper.style.width = offsetWidth+'px';// 表格有固定列时还会多出一个表头if(fixedWrapper.length){for (let i=0;i<fixedWrapper.length;i++) {fixedWrapper[i].style.top = '93px';fixedWrapper[i].style.zIndex = '2';fixedWrapper[i].style.position = 'fixed';headerWrapper.style.width = offsetWidth+'px';}}} else {headerWrapper.style.top = '';headerWrapper.style.zIndex = '';headerWrapper.style.position = 'inherit';headerWrapper.style.width = '';if(fixedWrapper.length){for (let i=0;i<fixedWrapper.length;i++) {fixedWrapper[i].style.top = '';fixedWrapper[i].style.zIndex = '';fixedWrapper[i].style.width = '';}}}}},
};
</script><style lang="scss" scoped>.app-container {height: calc(100vh - 108px);overflow-y: scroll;.table-total{height:300px;border:1px solid #eaedf1;}.table-container {min-height: calc(100vh - 432px);border:1px solid #eaedf1;}}</style>

以上代码中涉及到的几个数值,请参考注释根据实际情况进行修改。

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

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

相关文章

红酒达人教你秘技:选酒、存酒,一招一式皆学问

在繁忙的都市生活中&#xff0c;红酒不仅仅是一种饮品&#xff0c;更是一种生活态度&#xff0c;一种品味的象征。然而&#xff0c;面对琳琅满目的红酒品牌与种类&#xff0c;如何选择一瓶心仪的红酒&#xff0c;又如何妥善保存&#xff0c;使其保持很好口感&#xff0c;成为了…

python函数练习

1、编写函数&#xff0c;传入N&#xff0c;求123…N的和 def s_sum(num):i 1sum1 0while i < num:sum1 ii 1return sum1num int(input(请输入一个整数&#xff1a;)) print(和为:,s_sum(num))2、编写一个函数&#xff0c;定义一个列表&#xff0c;求列表中的最大值 d…

LabVIEW遇到无法控制国外设备时怎么办

当使用LabVIEW遇到无法控制国外产品的问题时&#xff0c;解决此类问题需要系统化的分析和处理方法。以下是详细的解决思路和具体办法&#xff0c;以及不同方法的分析和比较&#xff0c;包括寻求代理、国外技术支持、国内用过的人请教等内容。 1. 了解产品的通信接口和协议 思路…

LeetCode.25K个一组翻转链表详解

问题描述 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节…

Python 基础 (标准库):collections (集合类)

1. 官方文档 collections --- 容器数据类型 — Python 3.12.4 文档 Python 的 collections 模块提供了许多有用的数据类型&#xff08;包括 OrderedDict、Counter、defaultdict、deque 和 namedtuple&#xff09;用于扩展 Python 的标准数据类型。掌握 collections 中的数据类…

五子棋纯python手写,需要的拿去

import pygame,sys from pygame import * pygame.init()game pygame.display.set_mode((600,600)) gameover False circlebox [] # 棋盘坐标点存储 box [] def xy():for x in range(0,800//40): for y in range(0,800//40): box.append((x*40,y*40)) xy() defaultColor wh…

postman接口工具的详细使用教程

Postman 是一种功能强大的 API 测试工具&#xff0c;可以帮助开发人员和测试人员轻松地发送 HTTP 请求并分析响应。以下是对 Postman 接口测试工具的详细介绍&#xff1a; 安装与设置 安装步骤 访问 Postman 官网&#xff0c;点击右上角的“Download”按钮。 选择你的操作系统…

8.DELL R730服务器对RAID5进行扩容

如果服务器的空间不足了&#xff0c;如何进行扩容&#xff1f;我基本上按照如何重新配置虚拟磁盘或添加其他硬盘来进行操作。我的机器上已经有三块硬盘了&#xff0c;组了Raid5&#xff0c;现在再添加一块硬盘。 先把要添加的硬盘插入服务器&#xff0c;无论是在IDRAC还是管理…

leetcode153:寻找旋转排序数组中的最小值

题目链接&#xff1a;153. 寻找旋转排序数组中的最小值 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int findMin(vector<int>& nums) {int left 0, right nums.size() - 1;while(left < right){int mid left (right - left) / 2;if(nu…

物联网“此用户无权修改接入点名称设置”解决方案

根本原因apns-conf.xml里面没有 符合 物理网卡 的配置 可以先加一个APN试一下&#xff0c;看看默认的MCC和MNC是什么 然后在”命令行“查询一下 adb shell sqlite3 /data/user_de/0/com.android.providers.telephony/databases/telephony.db "select * from carriers wh…

乐鑫已支持Matter 1.2标准新增多种设备类型,启明云端乐鑫代理商

随着物联网技术的飞速发展&#xff0c;智能家居正逐渐成为现代生活的一部分。物联网和智能家居行业应用取得了巨大的增长&#xff0c;一系列无线连接的智能设备涌入家庭&#xff0c;为家庭生活带来自动化和便利。 像是可以连网的扬声器、灯泡和中控开关&#xff0c;它们都可以…

迁移学习——CycleGAN

CycleGAN 1.导入需要的包2.数据加载&#xff08;1&#xff09;to_img 函数&#xff08;2&#xff09;数据加载&#xff08;3&#xff09;图像转换 3.随机读取图像进行预处理&#xff08;1&#xff09;函数参数&#xff08;2&#xff09;数据路径&#xff08;3&#xff09;读取文…

MySQL笔记——索引

索引 SQL性能分析使用原则SQL提示覆盖索引前缀索引单列索引和联合索引索引设计原则 学习黑马MySQL课程&#xff0c;记录笔记&#xff0c;用于复习。 查询建表语句&#xff1a; show create table account;以下为建表语句&#xff1a; CREATE TABLE account (id int NOT NULL …

Redis-集群-环境搭建

文章目录 1、清空主从复制和哨兵模式留下的一些文件1.1、删除以rdb后缀名的文件1.2、删除主从复制的配置文件1.3、删除哨兵模式的配置文件 2、appendonly修改回no3、开启daemonize yes4、protect-mode no5、注释掉bind6、制作六个实例的配置文件6.1、制作配置文件redis6379.con…

使用 fvm 管理 Flutter 版本

文章目录 Github官网fvm 安装Mac/Linux 环境Windows 环境 fvm 环境变量fvm 基本命令 Github https://github.com/leoafarias/fvmhttps://github.com/flutter/flutter 官网 https://fvm.app/ fvm 安装 Mac/Linux 环境 Install.sh curl -fsSL https://fvm.app/install.sh …

MySQL索引与表结构

MySQL索引 索引的作用 提高查询速度&#xff1a;索引类似于书的目录&#xff0c;通过索引可以快速找到所需数据&#xff0c;而不必扫描整个表。加速排序和分组操作&#xff1a;索引可以加速ORDER BY和GROUP BY操作。提高连接操作的性能&#xff1a;在多表连接查询中&#xff…

如何通过财务指标筛选股票?

《战胜华尔街》的第九章是《房地产选股之道&#xff1a;从利空消息中选股》&#xff0c;但感觉林奇先生大半的篇幅并没有讲典型的房地产业股票&#xff0c;而是在讲园艺类股票&#xff1b;也没有着重于利空消息&#xff0c;而是在讲估值。 不管怎么样&#xff0c;在阅读《战胜…

20240627 每日AI必读资讯

&#x1f50d;挑战英伟达&#xff01;00 后哈佛辍学小哥研发史上最快 AI 芯片 - 3名大学辍学生创立、目前仅35 名员工、刚筹集1.2 亿美元的团队&#xff1a;Etched。 - 史上最快Transformer芯片诞生了&#xff01; - 用Sohu跑Llama 70B&#xff0c;推理性能已超B200十倍&…

IEEE-Trans系列!版面稀缺,现在投稿可加急处理,代表作神刊!

【SciencePub学术】今天小编给大家推荐一本计算机领域的SCI&#xff0c;隶属于IEEE出版社旗下&#xff0c;现已稳定检索49年&#xff01;影响因子4.0-5.0之间&#xff0c;JCR1区&#xff0c;中科院2区&#xff0c;质量口碑甚誉&#xff01; 有论文发表需求的学者可以后台联系张…

贪吃蛇项目:GameRun与GameEnd部分:游戏的主体运行与善后部分

准备工作&#xff1a;打印得分信息 在进行GameStart之前&#xff0c;我们需要在地图的右侧打印帮助信息&#xff0c;以及目前玩家的得分情况和一个食物在当前速度下的得分情况&#xff08;加速的状态下按比例增加食物的分数&#xff0c;减速的状态下则相反&#xff09;&#xf…