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

在vue2项目中el-table表格的表头和内容错位问题

一、问题描述以及产生原因

  • 问题描述:当el-table表格有横向滚动条和纵向滚动条,把横向滚动条拉到最右边,表格的表头会和内容错位(表头和内容列不对齐)
  • 问题产生原因:在el-table有纵向滚动条时,el-table__body-wrapper + 纵向滚动条的宽度是100%,故表格内容区域宽度不足100%,而表头el-table__header-wrapper的宽度仍为100%,表格内容实际宽度小于表头,因此造成错位

二、解决问题

  • 思路:给表格表头的宽度设置和表格内容一样即可100% - 纵向滚动条宽度
  • 代码实现
::v-deep {
  .el-table__header-wrapper {
  	// 这里我设置的纵向滚动条宽度为8px
    width: calc(100% - 8px) 
  }
}
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/56042.html

相关文章:

  • robot:生而为奴
  • 视觉语言模型新突破!苹果开源AIMv2,多模态融合性能提升10%!
  • nlp进阶
  • 200个前卫街头氛围涂鸦艺术水墨颜料手绘笔迹飞溅PNG免扣迭加纹理素材 VANTABLACK TEXTURES
  • C语言文件操作相关函数详解:fread、fwrite、fseek、ftell、fclose
  • 华为OD机试-最长的密码(Java 2024 E卷 100分)
  • 3.6 登录认证
  • vtkDepthSortPolyData 根据相机视图方向对多边形数据进行排序
  • 2025政府工作报告亮点:发展新质生产力,为现代化产业体系 “赋能提速”!
  • leetcode日记(84)交错字符串
  • 基于STM32的简易出租车计费设计(Proteus仿真+程序+设计报告+原理图PCB+讲解视频)
  • 计算机组成原理笔记(一)——1.1电子计算机与存储程序控制
  • flask-定时任务
  • AMBA 总线及AXI协议介绍
  • 【计网】运输层
  • 【PSIM】峰值电流如何用D类触发器
  • 浅说图论基础
  • 数据库【MySQL安装配置篇(保姆级教程)】
  • 【go】以Kubernetes中的 kubelet 为引思考go语言中共享状态的选择
  • LeetCode 解题思路 12(Hot 100)
  • 使用ffmpeg读取mp4文件解码失败
  • 如何记录日常笔记
  • Django 中的算法应用与实现
  • LeetCode - 神经网络的 反向传播(Sigmoid + MSE) 教程
  • 玩转python: 掌握Python数据结构之链表
  • 安当全栈式金仓数据库安全解决方案:透明加密、动态凭据与勒索防护一体化实践
  • 【免费】2000.1-2021.9上市公司仲裁数据
  • TypeError: Cannot set properties of undefined (setting ‘xxx‘)
  • c++快速入门-2
  • 计算机网络-服务器模型