vue3 element-plus el-table表头冻结,表头吸顶

一.使用方式

在main.ts页面创建 vue指令

	import { createSticky } from '@/utils/sticky'const app = createApp(App)createSticky(app)...app.mount('#app');

在el-table标签上使用 v-sticky

<div class="table-box"><!--此处的 .table-box 是会出现滚动条的DOM元素通过document.querySelector选择器进行监听滚动条,如果不传则监听document.querySelector('body')的滚动条--><el-table  v-sticky="{ top: 50, parent: '.table-box'}"        >....</el-table>
<div>

通过以上使用方式,el-table就可以进行吸顶了。

二.脚本文件

复制并保存以下脚本内容到 utils文件夹。

/*** 思路:通过简体 el-table的 thead和tbody父级别区域,进行设置对于的fixed*/function getElParentBySelector(el: any, queryClassSelector: string) {if (!el) {return el}if ([...el.classList].includes(queryClassSelector)) {return el}return getElParentBySelector(el.parentNode, queryClassSelector)
}function getTableShowWidth(thead: string) {const tableBox = getElParentBySelector(thead, 'el-table')return tableBox.getBoundingClientRect().width
}function createTableSticky(el: any, binding: any, vNode?: any) {// 获取表格(element)let thead = el.querySelector('.el-table__header')thead = getElParentBySelector(thead, 'el-table__header-wrapper')const tbody = el.querySelector('.el-table__body')//获取thead 的显示宽度const headerShowWidth = getTableShowWidth(thead)// 获取滚动元素const scrollParent = document.querySelector(binding.value.parent||'body')if (!scrollParent || binding.value.disabled === true) {return}scrollParent.addEventListener('scroll', function () {const stickyTop= binding.value.top||0;const theadHeight = thead.clientHeight// 获取thead距离顶部的距离const theadTop = thead.getBoundingClientRect().topif (theadTop <= stickyTop) {tbody.style.paddingTop = theadHeight + 'px'thead.style.position = 'fixed'thead.style.zIndex = '2021'thead.style.top = stickyTop + 'px'thead.style.borderTop = '1px solid #EBEBEB'//thead.style.width = tbody.offsetWidth + 'px' ////使用最佳显示宽度显示内容,防止有横向滚动条时,固定列显示超出thead.style.width =(tbody.offsetWidth < headerShowWidth ? tbody.offsetWidth : headerShowWidth) + 'px'//获取父级别的宽度,设置列头行只能是负极宽度}// 判断是否需要回归原来位置const originally = tbody.getBoundingClientRect().top// 判断底部距离是否超过表头const goBeyond = tbody.getBoundingClientRect().bottomif (originally > stickyTop || goBeyond <= thead.offsetHeight) {tbody.style.paddingTop = '0'thead.style.position = 'relative'thead.style.zIndex = '0'thead.style.top = 0 + 'px'thead.style.width = tbody.offsetWidth + 'px'thead.style.borderTop = 'none'}})
}export function createSticky(vue: any) {let clearTimeId = 0// el-table表头吸顶效果vue.directive('sticky', {// 当被绑定的元素插入到 DOM 中时……mounted(el: any, binding: any) {//TIP 延时设置,确保表格进行渲染成功!clearTimeId = setTimeout(() => {createTableSticky(el, binding)clearTimeout(clearTimeId)}, 1000)},update(el: any, binding: any) {//TIP 延时设置,确保表格进行渲染成功!clearTimeId = setTimeout(() => {createTableSticky(el, binding)clearTimeout(clearTimeId)}, 1000)},unmounted(el: any, binding: any) {clearTimeId && clearTimeout(clearTimeId)}})
}

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

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

相关文章

java线程三种方式

1.继承Thread类 线程1.2交替执行 public class MyThread extends Thread {Overridepublic void run() {for (int i 0; i < 100; i) {System.out.println(getName()"------""HelloWorld");}} } /*** desc 继承Thread类&#xff0c;线程1 2 交替执行* …

python实现自动刷平台学时

背景 前一阵子有个朋友让我帮给小忙&#xff0c;因为他每学期都要看视频刷学时&#xff0c;一门平均需要刷500分钟&#xff0c;一学期有3-4门需要刷的。 如果是手动刷的话&#xff0c;比较麻烦&#xff0c;能否帮他做成自动化的。搞成功的话请我吃饭。为了这顿饭&#xff0c;咱…

京东秒杀之商品展示

1 在gitee上添加.yml文件 1.1 添加good-server.yml文件 server:port: 8084 spring:datasource:url: jdbc:mysql://localhost:3306/shop_goods?serverTimezoneGMT%2B8driverClassName: com.mysql.cj.jdbc.Drivertype: com.alibaba.druid.pool.DruidDataSourceusername: rootpa…

SQL 查询优化的 10 个案例!

在应用开发的早期&#xff0c;数据量少&#xff0c;开发人员开发功能时更重视功能上的实现&#xff0c;随着生产数据的增长&#xff0c;很多SQL语句开始暴露出性能问题&#xff0c;对生产的影响也越来越大&#xff0c;有时可能这些有问题的SQL就是整个系统性能的瓶颈。 SQL优化…

多功能音乐沙漏的设计与实现

【摘要】随着当今社会快节奏生活的发展&#xff0c;当代大学生越来忽视时间管理的重要性&#xff0c;在原本计划只看几个视频只玩几个游戏的碎片化娱乐中耗费了大量的时光&#xff0c;对于自己原本的学习生活产生了巨大的影响。为更加有效的反映时间的流逝&#xff0c;特设计该…

智慧公厕客流统计,是通过什么原理实现的?

在这个信息爆炸的时代&#xff0c;科技已经深刻地渗透到我们生活的方方面面&#xff0c;就连那些看似与现代社会脱节的公厕&#xff0c;也迎来了智慧时代的冲击。智慧公厕客流统计系统的崭新面貌&#xff0c;不仅实现了对卫生间使用情况的精准监测&#xff0c;更为城市管理者提…

第十七章 解读PyTorch断点训练(工具)

主要有以下几方面的内容&#xff1a; 对于多步长训练需要保存lr_schedule初始化随机数种子保存每一代最好的结果 简单详细介绍 最近在尝试用CIFAR10训练分类问题的时候&#xff0c;由于数据集体量比较大&#xff0c;训练的过程中时间比较长&#xff0c;有时候想给停下来&…

Gitee上传代码教程

1. 本地安装git 官网下载太慢&#xff0c;我们也可以使用淘宝镜像下载&#xff1a;CNPM Binaries Mirror 安装成功以后电脑会有Git Bush标识&#xff0c;空白处右键也可查看。 2. 注册gitee账号&#xff08;略&#xff09; 3. 创建远程仓库 4. 上传代码 4.1 在项目文件目录…

go当中的channel 无缓冲channel和缓冲channel的适用场景、结合select的使用

Channel Go channel就像Go并发模型中的“胶水”&#xff0c;它将诸多并发执行单元连接起来&#xff0c;或者正是因为有channel的存在&#xff0c;Go并发模型才能迸发出强大的表达能力。 无缓冲channel 无缓冲channel兼具通信和同步特性&#xff0c;在并发程序中应用颇为广泛。…

坚鹏:贵州银行西南财经大学零售业务数字化转型与场景营销策略

中国银保监会2022年1月正式发布了中国银保监会发布《关于银行业保险业数字化转型的指导意见》&#xff0c;这标准着中国银行业从局部的数字化转型向全面的数字化转型转变&#xff0c;进一步加速了银行数字化转型高潮的到来。 《关于银行业保险业数字化转型的指导意见》提出明确…

【教学类-06-12】20231126 (二)三位数 如何让加减乘除题目从小到大排序(以0-110之间加法为例,做正序排列用)

结果展示 背景需求&#xff1a; 二位数&#xff1a;去0 三位数&#xff08;需要排除很多0&#xff09; 解决思路 一、把数字改成三位数 二、对数组内的题目&#xff0c;8种可能性进行去“0”处理 1、十位数&#xff08;去百位数0&#xff09;十位数&#xff08;去百位数0&am…

淘宝商品详情数据API接口php java python

在当今竞争激烈的电子商务环境中&#xff0c;如何提高用户体验、提升运营效率并保障交易安全性是每个电商平台都需要关注的问题。淘宝作为中国最大的综合性电商平台&#xff0c;一直在不断创新和完善自身的服务体系。其中&#xff0c;淘宝商品详情API接口在跨境系统中发挥着越来…

【C/PTA】指针专项练习(一)

本文结合PTA专项练习带领读者掌握指针&#xff0c;刷题为主注释为辅&#xff0c;在代码中理解思路&#xff0c;其它不做过多叙述。 目录 6-1 删除字符串中数字字符6-2 找最大值及其下标6-3 求两数平方根之和6-4 求一组数中的最大值、最小值和平均值6-5 两个4位正整数的后两位互…

HuggingFace学习笔记--Tokenizer的使用

1--AutoTokenizer的使用 官方文档 AutoTokenizer() 常用于分词&#xff0c;其可调用现成的模型来对输入句子进行分词。 1-1--简单Demo 测试代码&#xff1a; # 分词器测试Demo from transformers import AutoTokenizerif __name__ "__main__":checkpoint "…

数据增强让模型更健壮

在做一些图像分类训练任务时,我们经常会遇到一个很尴尬的情况,那就是: 明明训练数据集中有很多可爱猫咪的照片,但是当我们给训练好的模型输入一张戴着头盔的猫咪进行测试时,模型就不认识了,或者说识别精度很低。 很明显,模型的泛化能力太差,难道戴着头盔的猫咪就不是猫…

线性分类器--数据处理

数据集划分 通常按照 70%&#xff0c;20% &#xff0c;10% 来分数据集 数据处理 斯坦福的线性分类器体验 http://vision.stanford.edu/teaching/cs231n-demos/linear-classify/

找工作面试技巧

问题描述&#xff1a;找工作时&#xff0c;不知道如何回答问题怎么办。 问题解决&#xff1a;可以尝试使用STAT原则来回答问题。具体如下。 "STAR" 原则是一种常用于回答面试问题的方法&#xff0c;特别是在描述个人经验、解决问题或展示技能和能力时。"STAR&q…

【解决视觉引导多个位置需要标定多个位置的问题】

** 以下只针对2D定位&#xff0c;就是只有X、Y、Rz三个自由度的情况。** 假设一种情况&#xff0c;当视觉给机器人做引导任务时&#xff0c;零件有多个&#xff0c;分布在料框里&#xff0c;视觉需要走多个位置去拍&#xff0c;那么只需要对第一个位置确定拍照位&#xff0c;确…

QContextMenuEvent 是 Qt 框架中的一个类,用于表示上下文菜单事件

QContextMenuEvent 是 Qt 框架中的一个类&#xff0c;用于表示上下文菜单事件。 上下文菜单事件&#xff08;Context Menu Event&#xff09;在用户右击部件时触发&#xff0c;通常用于显示上下文菜单。这些菜单可以包含与所选部件相关的操作和选项。 QContextMenuEvent 类提…

C语言重点编程题——1-10

目录 1.编一个程序,输入10个整数,统计并输出其中正数、负数和零的个数。 2.编程序,按下列公式计算e的值(精度为1e-6)e=1+1/1!+1/2!+1/3!.......1/n! 3.编程,输入n个整数,求这n个数的偶数平均值,并输出。 4.若一个3位整数的各位数字的立方和等于这个整数,则称之为“水…