el-table 使用fixed 固定列 但是固定列随着Y轴滑动错位
在使用fixed 固定列的时候随着滚动条向下滚动数据行和固定行出现了错位如下图所示影响美观解决方式如下图这个是我全局el-table的css配置重点是.el-table__fixed-body-wrapper { max-height: calc(630px - 120px); overflow-y: auto; }这一段我数据行定义的高度是(630px - 100px)固定列定义的是(630px - 120px后面又测试了一下-115px是完美的)这个结果是我试出来的可以根据自己的项目先确定好了数据行的高度在手动调整固定列的高度具体原因不太明白.el-table:not(.el-dialog .el-table) { max-height: 630px; .el-table__header-wrapper th, .el-table__fixed-header-wrapper th { word-break: break-word; background-color: #f8f8f9; color: #515a6e; padding: 4px 0; font-size: 12px; } .el-table__body-wrapper { max-height: calc(630px - 100px); overflow-y: auto; } .el-table__body td { padding: 4px 0; font-size: 12px; } .el-table__row { height: 32px; } .cell { line-height: 1.4; padding: 0 4px; } .el-table__fixed-body-wrapper { max-height: calc(630px - 120px); overflow-y: auto; } }---------------------------------------------2026/08/05补充---------------------------------------------------------------在后续开发的过程中发现用鼠标拖动滚动条时会产生只有右侧固定列滚动而中间的数据不动的现象但是使用鼠标滚轮滚动就没有产生这种现象很奇怪后面查了AI大概原因如下。Element UI 固定列的实现方式fixed 列不是钉住原表格的列而是复制一份只含固定列的表格作为遮罩层 .el-table__fixed-right 盖在主表格右侧其内部 .el-table__fixed-body-wrapper 本身可滚动。项目全局 CSS 制造了两个独立滚动区element-ui.scss给主表格 body-wrapper 和固定层 fixed-body-wrapper 各自设了 max-height overflow-y: auto。固定层又恰好盖住主表格的滚动条位置所以你拖动的那条滚动条实际属于固定层。Element UI 只有单向同步源码里只有主表格滚动 → 把 scrollTop 写回固定层没有反向逻辑。拖滚动条 浏览器原生行为只滚动拥有该滚动条的元素固定层→ 没有反向同步 → 左侧不动滚轮 滚主区域时触发正向同步滚固定层时 Element UI 有专门的 wheel 转发 → 一切正常。这就解释了滚轮好使、拖滚动条不灵的不对称现象。解决这个问题的方式是在全局的main.js中加入了如下的监听全局生效即使没有固定列的table也没有副作用对前端整体性能影响较小。document.addEventListener(scroll, (event) { const target event.target if (!target.classList || !(target.classList.contains(el-table__fixed-body-wrapper) || target.classList.contains(el-table__fixed-right-body-wrapper))) return const table target.closest(.el-table) const bodyWrapper table table.querySelector(.el-table__body-wrapper) if (bodyWrapper bodyWrapper.scrollTop ! target.scrollTop) { bodyWrapper.scrollTop target.scrollTop } }, true)---------------------------------------------2026/08/06补充---------------------------------------------------------------根本原因是不能使用CSS指定max-height由于项目需要全局使用将下面代码启动到main.js中原因如下纯 CSS 写 max-height 浏览器确实产生了滚动条 → 但组件的 watch 没触发 → layout.height 保持 null → updateScrollY 直接返回 false → scrollY 永远是 false → 表头不渲染 gutter 补偿列、右侧固定层 right: 0 压在滚动条上、列宽不扣滚动条宽度 → 固定列错位。传 max-height prop watch 触发 → layout.height 630 → updateScrollY 正常计算 → scrollY true → 全套补偿机制激活。一句话总结CSS 只能改变浏览器的渲染结果但组件的 JS 逻辑不会也无法自动去感知外部 CSS 造成了滚动条——它只认自己收到的 prop。这不是写法问题是 Element UI 2.x 的设计局限。Element.Table.props.maxHeight { type: [String, Number], default: 630 }它改的是组件的 props 默认值定义。每个 el-table 实例创建时Vue 会把没显式传值的 prop 用默认值 630 填充——相当于给所有表格全局传了 prop。这是唯一一个能全局生效、且组件内部逻辑能识别的入口。它和项目里已有的 Element.Dialog.props.closeOnClickModal.default false 是完全相同的官方套路不是 hack。

相关新闻

Vim高效文本编辑:从模式化操作到插件配置的完整指南

Vim高效文本编辑:从模式化操作到插件配置的完整指南

1. 从“编辑器之神”到日常伙伴:为什么Vim值得你投入时间如果你在Linux世界里待过一段时间,无论你是运维、开发还是系统管理员,大概率都听过Vim的大名。它被冠以“编辑器之神”的称号,也常常被新手吐槽为“退出都困难”的“上古神…

2026/8/7 12:32:54 阅读更多 →
深度学习实战-基于Resnet50的青光眼疾病图像识别模型

深度学习实战-基于Resnet50的青光眼疾病图像识别模型

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

2026/8/7 12:32:54 阅读更多 →
UE5 RPG动态伤害公式:基于GAS Execution Calculations实现数据驱动计算

UE5 RPG动态伤害公式:基于GAS Execution Calculations实现数据驱动计算

1. 项目概述:为什么我们需要动态伤害公式? 在UE5里做RPG,伤害计算是绕不开的核心。很多新手或者从传统蓝图转过来的开发者,习惯把伤害逻辑直接写在角色的蓝图事件图表里,比如一个“造成伤害”事件,后面跟着…

2026/8/7 12:32:54 阅读更多 →

最新新闻

《Kubernetes 容器编排服务治理深度 线上高并发排障实战》

《Kubernetes 容器编排服务治理深度 线上高并发排障实战》

《Kubernetes 容器编排服务治理深度 线上高并发排障实战》 作者: 沈佩涵 (Shen Pei Han) (AI客栈)技术方向: 云原生 AI 平台、Kubernetes 智能调度、Go 驱动的 AI 后端服务、AI 应用基础设施 💡 导语与现场排障背景 在生产环境重构 Kubernetes 容器编排与服务治理…

2026/8/7 15:58:54 阅读更多 →
LizzieYzy:围棋AI分析工具的终极指南,从新手到高手的完整教程

LizzieYzy:围棋AI分析工具的终极指南,从新手到高手的完整教程

LizzieYzy:围棋AI分析工具的终极指南,从新手到高手的完整教程 【免费下载链接】lizzieyzy LizzieYzy - GUI for Game of Go 项目地址: https://gitcode.com/gh_mirrors/li/lizzieyzy LizzieYzy是一款强大的围棋AI分析工具,专为围棋爱好…

2026/8/7 15:58:54 阅读更多 →
《Go 后端服务开发并发编程模型 线上高并发排障实战》

《Go 后端服务开发并发编程模型 线上高并发排障实战》

《Go 后端服务开发并发编程模型 线上高并发排障实战》 作者: 沈佩涵 (Shen Pei Han) (AI客栈)技术方向: 云原生 AI 平台、Kubernetes 智能调度、Go 驱动的 AI 后端服务、AI 应用基础设施 💡 导语与现场排障背景 在最近一次线上压测复盘中,我们的 AI 智能…

2026/8/7 15:58:54 阅读更多 →
COMSOL优化从入门到精通:参数优化与拓扑优化实战指南

COMSOL优化从入门到精通:参数优化与拓扑优化实战指南

1. 项目概述:从“会用”到“用好”的跨越 如果你已经能在 COMSOL Multiphysics 里建好模型、设置好物理场、成功求解并得到一堆花花绿绿的云图,恭喜你,你已经迈过了“会用”的门槛。但接下来,一个更现实的问题摆在面前&#xff1a…

2026/8/7 15:58:54 阅读更多 →
《云原生 AI 平台搭建智能调度系统 线上高并发排障实战》

《云原生 AI 平台搭建智能调度系统 线上高并发排障实战》

《云原生 AI 平台搭建智能调度系统 线上高并发排障实战》 作者: 沈佩涵 (Shen Pei Han) (AI客栈)技术方向: 云原生 AI 平台、Kubernetes 智能调度、Go 驱动的 AI 后端服务、AI 应用基础设施 💡 导语与现场排障背景 在最近一次线上压测复盘中,我们的 AI …

2026/8/7 15:58:54 阅读更多 →
Guava RateLimiter单机限流实战:从令牌桶算法到Spring Boot集成

Guava RateLimiter单机限流实战:从令牌桶算法到Spring Boot集成

1. 从一次线上故障说起:为什么我们需要单机限流?那天晚上,系统监控突然报警,CPU使用率飙升到95%,接口响应时间从几十毫秒直接飙到十几秒。登录服务器一看,日志里全是同一个商品详情查询接口的请求&#xff…

2026/8/7 15:57:53 阅读更多 →

日新闻

为什么scrcpy成为Android投屏的终极解决方案:完整实战指南

为什么scrcpy成为Android投屏的终极解决方案:完整实战指南

为什么scrcpy成为Android投屏的终极解决方案:完整实战指南 【免费下载链接】scrcpy Display and control your Android device 项目地址: https://gitcode.com/GitHub_Trending/sc/scrcpy 想要将Android手机屏幕完美投射到电脑上,享受大屏操作的自…

2026/8/7 0:00:19 阅读更多 →
如何在5分钟内掌握Tom Select:打造现代化表单选择器的终极指南

如何在5分钟内掌握Tom Select:打造现代化表单选择器的终极指南

如何在5分钟内掌握Tom Select:打造现代化表单选择器的终极指南 【免费下载链接】tom-select Tom Select is a lightweight (~16kb gzipped) hybrid of a textbox and select box. Forked from selectize.js to provide a framework agnostic autocomplete widget wi…

2026/8/7 0:00:19 阅读更多 →
5分钟快速上手:NSZ压缩工具终极指南,轻松管理Switch游戏文件

5分钟快速上手:NSZ压缩工具终极指南,轻松管理Switch游戏文件

5分钟快速上手:NSZ压缩工具终极指南,轻松管理Switch游戏文件 【免费下载链接】nsz NSZ - Homebrew compatible NSP/XCI compressor/decompressor 项目地址: https://gitcode.com/gh_mirrors/ns/nsz 你是否在为Nintendo Switch游戏文件占用大量存储…

2026/8/7 0:00:19 阅读更多 →

周新闻

最大流算法详解:从水管网络到Ford-Fulkerson与Dinic实战

最大流算法详解:从水管网络到Ford-Fulkerson与Dinic实战

1. 从水管网络到最大流:一个核心问题的诞生想象一下,你是一个城市供水系统的总工程师。你的城市有多个水源(水库),需要通过一个复杂的地下管道网络,将水输送到各个居民区。每条管道都有其最大通水能力&…

2026/8/6 22:02:27 阅读更多 →
基于Springboot的企业门户网站(源码+LW+调试文档+讲解)

基于Springboot的企业门户网站(源码+LW+调试文档+讲解)

温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台…

2026/8/6 22:02:27 阅读更多 →
MATLAB xcorr函数详解:从互相关原理到四大实战应用

MATLAB xcorr函数详解:从互相关原理到四大实战应用

1. 从一次信号“找茬”说起:为什么我们需要互相关几年前,我在处理一组声学传感器数据时遇到了一个棘手的问题。我有两个麦克风记录了一段相同的音频信号,理论上它们接收到的声音波形应该非常相似,只是由于麦克风位置不同&#xff…

2026/8/6 22:02:27 阅读更多 →

月新闻

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘macOS版的龟速下…

2026/8/5 23:28:39 阅读更多 →
终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗?ncmdump解密工具帮你轻松解决这个困…

2026/8/6 22:02:28 阅读更多 →
HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片:为英语学习 App 打造桌面级学习助手

HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片:为英语学习 App 打造桌面级学习助手

AgentCard 智能体卡片:为英语学习 App 打造桌面级学习助手适用平台:HarmonyOS 7.0 (API 26 Beta)一、引言 HarmonyOS 7.0(API 26 Beta)新增了 AgentCard 智能体卡片能力,这是继 HMAF(鸿蒙智能体框架&#x…

2026/8/5 23:46:51 阅读更多 →