【记录52】el-table-column 添加fixed属性 滚动条无法滑动

embedded/2025/1/20 5:28:50/

问题: el-table-column 添加fixed属性 滚动条无法滑动

使用element UI组件,用到el-tableel-table-column的fixed属性时,当滚动条长度小于固定列时,滚动条无法通过鼠标去点击滑动操作

原因

fixed是用来固定列的属性,其的展现层级会高于滚动条的层级,因此会导致该问题,但使用z-index层级是无法起到效果的

解决方案

<style>
/* 设置默认高度-滚动条高度 */
.el-table__fixed {height: calc(100% - 15px) !important;
}
/* 用于消除固定列下方的伪元素边框线 */
.el-table__fixed:before {height: 0px;
}
</style>

解决过程

查找了很多资料,有的方法是可行的,有的不可行,可行的有的样式太多了,该方法用极短的样式就可以解决,笔者亲测有效


http://www.ppmy.cn/embedded/155390.html

相关文章

nodejs后端ws与http结合共享一个服务器,前端websocket发送信息后端ws接收信息,使用Map定型数组设置ID

//服务端代码 const httprequire(node:http); const WebSocketrequire(ws);const serverhttp.createServer(); //创建websocket服务 const wssnew WebSocket.WebSocketServer({server}); //创建定型数组 const clientsnew Map();wss.on(connection,(ws)>{ //设置ws的IDclie…

微软SCCM:企业级系统管理的核心工具

目录 摘要 1. 引言 2. SCCM的基本概念 2.1 什么是SCCM? 2.2 SCCM的历史 3. SCCM的架构 3.1 中心服务器 3.2 数据库 3.3 管理点(Management Point) 3.4 分发点(Distribution Point) 3.5 客户端代理 3.6 报告服务 4. SCCM的核心功能 4.1 软件部署与管理 4.2 操…

无降智o1 pro——一次特别的ChatGPT专业模式探索

这段时间和朋友们交流 ChatGPT 的使用心得&#xff0c;大家都提到一个很“神秘”的服务&#xff1a;它基于 O1 Pro 模型&#xff0c;能够在对话里一直保持相对高水平的理解和回复&#xff0c;不会突然变得“降智”。同时&#xff0c;整体使用还做了免折腾的网络设置——简单一点…

速通Docker === 常用命令

目录 Docker命令 镜像操作 容器操作 基础操作 启动参数 容器内部操作 打包成指定文件 发布镜像 总结 镜像操作 容器操作 启动容器参数 容器内部操作 打包镜像 启动指定镜像的容器 发布镜像 Docker命令 启动一个nginx,并将它的首页改为自己的页面&#xff0c;发布…

数据可视化如何推动文旅行业的创新与发展

文旅行业作为25年国家重点政策照顾的行业&#xff0c;各家公司都在倾力打造相关的数字化产品。但是文旅行业相比较数据分析来说&#xff0c;目前困扰行业的难点在于面对海量数据信息如何将这些转化成有益信息是文旅行业面临的重要课题。因此&#xff0c;数据可视化逐渐收到了文…

在线图片压缩工具

在线图片压缩工具&#xff0c;无需登录&#xff0c;无需成本&#xff0c;用完就走。 包括中文和英文版本。 官网地址&#xff1a; https://compress.openai2025.com/ 效果&#xff1a;

css3网格布局

一、基本概念 网格容器&#xff08;Grid Container&#xff09; 是应用了display: grid或display: inline - grid属性的元素。它是网格布局的最外层元素&#xff0c;所有的网格项目&#xff08;Grid Items&#xff09;都包含在这个容器内。例如&#xff1a; .container {dis…

「港科技」联手「地平线」打造GPT风格的自动驾驶世界模型:DrivingWorld

摘要 最近在自回归&#xff08;AR&#xff09;生成模型方面的成功&#xff0c;例如自然语言处理中的GPT系列&#xff0c;激发了在视觉任务中复制这一成功的努力。一些研究尝试将这种方法扩展到自动驾驶中&#xff0c;通过构建基于视频的世界模型来生成逼真的未来视频序列和预测…