当前位置: 首页 > news >正文

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)}})
}

相关文章:

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

一.使用方式 在main.ts页面创建 vue指令 import { createSticky } from /utils/stickyconst app createApp(App)createSticky(app)...app.mount(#app);在el-table标签上使用 v-sticky <div class"table-box"><!--此处的 .table-box 是会出现滚动条的DOM元…...

mysql中删除数据后,新增数据时id会跳跃,主键自增id不连续

引言&#xff1a; 在使用MySQL数据库时&#xff0c;有时候我们需要删除某些记录&#xff0c;但是删除记录后可能会导致表中的id不再连续排序。 如何实现删除记录后让id重新排序的功能。 如图&#xff1a; 删除数据后&#xff0c;中间的id不会自动连续。 下面有两种方法进行重…...

todesk连接ubuntu显示当前系统并无桌面环境,或无显示器,无法显示远程桌面,您需要自行安装X11桌面环境,或者使用终端文件功能

ToDesk远程遇到的问题如上图&#xff0c;换向日葵直接黑屏&#xff1b; 问题原因 截止发文时间&#xff0c;Todesk只支持X11协议&#xff0c;没有适配最新的Wayland协议&#xff0c;所以我们需要把窗口系统调整为X11才可以。 解决方法 修改配置文件&#xff0c;关闭wayland su…...

webpack学习-1.起步

webpack学习-1.起步 1.基础设置2.配置文件的引入3.总结 1.基础设置 首先 webpack是干嘛的呢&#xff0c;用官网的一张图 Webpack 是一个现代的静态模块打包工具。它主要用于将前端应用程序中的各种资源&#xff08;例如 JavaScript、CSS、图片等&#xff09;打包成一个或多个…...

GNU Radio 教程

初学者教程 GNU 无线电简介 什么是 GNU 无线电&#xff1f;安装 GNU 无线电你的第一个流程图 流程图基础知识 GRC 中的 Python 变量流程图中的变量运行时更新变量信号数据类型转换数据类型包装位流和向量层次块和参数 创建和修改 Python 块 创建你的第一个块带向量的 Pyt…...

Linux 下命令行启动与关闭WebLogic的相关服务

WebLogic 的服务器类型 WebLogic提供了三种类型的服务器&#xff1a; 管理服务器节点服务器托管服务器 示例和关系如下图&#xff1a; 对应三类服务器&#xff0c; 就有三种启动和关闭的方式。本篇介绍使用命令行脚本的方式启动和关闭这三种类型的服务器。 关于WebLogic 的…...

模型量化相关知识汇总

量化&反量化 量化操作可以将浮点数转换为低比特位数据表示,比如int8和 uint8. Q(x_fp32, scale, zero_point) round(x_fp32/scale) zero_point,量化后的数据可以经过反量化操作来获取浮点数 x_fp32 (Q - zero_point)* scale pytorch中 quantize_per_tensor的解释 py…...

yum 操作,出现Cannot retrieve metalink for repository: epel/x86_64

详细报错如下&#xff1a; Loaded plugins: fastestmirror Determining fastest mirrorsOne of the configured repositories failed (Unknown),and yum doesnt have enough cached data to continue. At this point the onlysafe thing yum can do is fail. There are a few…...

MySQL 8.2 Command Line Client闪退

原因一 服务没有打开 原因二 找不到my.ini文件 原因一的解决方法 操作1进入管理 操作2选择服务 1 2 3 操作3选择MySQL服务并打开 原因二的解决方法 查找目录中是否有my.ini文件 C:\Program Files\MySQL\MySQL Server 8.2&#xff08;一般在这个目录下&#xff09; 有时…...

【Geoserver】SLD点位样式(PointSymbolizer)设计全通

SLD文件可以控制geoserver的样式管理&#xff0c;这里专门针对点位进行设计&#xff0c;首先点位的设计需要用到这面这个大标签 之前的项目中已经用到了很多关于面的样式管理&#xff0c;这里新学习的是关于点的样式管理 PointSymbolizer 参考资料地址&#xff1a;https://doc…...

大数据基础设施搭建 - 数据装载

文章目录 一、概述二、数据装载&#xff08;HDFS -> Hive&#xff09;2.1 创建Hive表2.1.1 业务全量表建表语句2.1.2 业务增量表建表语句2.1.3 流量增量表建表语句 2.2 数据装载2.2.1 初始化装载省份和地区表2.2.2 业务数据装载&#xff08;1&#xff09; 开发脚本&#xff…...

医药行业:轻松学会超低温冰箱技能

超低温冰箱在医疗、科研和生物领域中扮演着至关重要的角色&#xff0c;用于存储和保护对温度极为敏感的样品和药品。 然而&#xff0c;由于这些冰箱内的温度波动可能导致样品的损坏&#xff0c;因此对超低温冰箱的监控变得至关重要。 客户案例 医疗研究机构 上海某医疗研究机…...

信息化系列——企业信息化建设(2)

企业信息化建设常见问题 1、信息化意识薄弱 目前&#xff0c;仍有许多企业的管理者在信息化方面表现出薄弱的认识&#xff0c;他们对信息化建设的重视程度显得捉襟见肘。结果&#xff0c;企业在信息化建设的人力、物力支持方面投入甚微&#xff0c;导致信息化建设难以完成顶层…...

php爬虫去抓取京东优惠券代码,事半功倍

没事总分享一些抓取方案的简单代码&#xff0c;实际中爬虫涉及的内容知识点其实很多&#xff0c;一般数据较少或非频繁的时候还是容易处理的。但是简单的时候也有问题的时候&#xff0c;比如ip经常被封&#xff0c;被限制等等问题。如果抓取的时候时间短或可以外赚费用的时候还…...

电子书制作神器!错过等十年

众所周知&#xff0c;随着科技的飞速发展&#xff0c;电子书已成为越来越多人的首选阅读方式。但制作电子书并不费力&#xff0c;一个制作电子书的神器就能解决这些问题。 那这款神器究竟有何魅力&#xff1f;它能帮助我们制作出怎样的电子书&#xff1f; 首先&#xff0c;这款…...

文献速递:机器学习在超声非破坏性评估中的合成和增强训练数据综述(第二部分)— 合成数据生成方法用于超声波测试

Title 题目 A review of synthetic and augmented training data for machine learning in ultrasonic non-destructive evaluation 机器学习在超声无损检测中合成与增强训练数据的综述 01 文献速递介绍 注&#xff1a;原文篇幅较长&#xff0c;这里分多次进行分享。近年来&…...

gitlab高级功能之mirroring - push mirroring(一)

今天给大家介绍一个gitlab很高级也是非常有用的功能 - gitlab的mirroring&#xff0c;你可以将仓库镜像到外部或从外部镜像仓库过来&#xff0c;从而可以实现分支、标签和提交的自动同步。 文章目录 1. mirroring的实现方式2. push mirroring2.1 简介2.2 说明 3. 配置推送镜像3…...

【PUSDN】WebStorm中报错Switch language version to React JSX

简述 WebStorm中报错Switch language version to React JSX 可能本页面的写法是其他语法。所以可以不用管。 测试项目&#xff1a;ant design vue pro 前情提示 系统&#xff1a; 一说 同步更新最新版、完整版请移步PUSDN Powered By PUSDN - 平行宇宙软件开发者网www.pusdn…...

【算法思考记录】力扣1094.拼车 C++【树状数组】

拼车问题&#xff08;LeetCode 1094&#xff09;的解析与C实现 Problem: 1094. 拼车 题目背景 在本题中&#xff0c;我们需要处理一个拼车的问题。假设一辆车有固定的座位容量&#xff0c;我们需要根据乘客的上车和下车地点&#xff0c;判断车辆是否能够在整个行程中满足不超过…...

业务场景中Hive解析Json常用案例

业务场景中Hive解析Json常用案例 json在线工具 json格式转换在线工具 https://tool.lu/json/format格式互转&#xff1a; // 格式化可以合并整行显示 {"name":"John Doe","age":35,"email":"johnexample.com"}// 格式化…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...