【el-table】修改element-ui滚动条高度，并适配fixed列表最后一行错位或遮挡滚动条样式

MMMcrymmm

已于 2024-09-04 15:38:42 修改

阅读量1.3k

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue 前端 elementui javascript css

于 2024-09-04 15:35:47 首次发布

本文链接：https://blog.csdn.net/mhl0414/article/details/141893745

项目场景：

elementui全局设置了公共样式，但是之前设置的滚动条只有10px高度，太小了，用户使用选不中滚动条，希望可以修改滚动条高度

原先的滚动条

解决方法

关于修改滚动条：

在common文件中设置全局的滚动条宽高

::-webkit-scrollbar {
	width: 10px;
	height: 15px; //主要是高度
}

可以简单改变滚动条高度

在这里插入图片描述

问题一：

有数据时，原先fixed的内容会遮挡滚动条

在这里插入图片描述

这个时候将两侧fixed固定列的高度设为自动，在底部增加一个滚动条高度，不让遮挡生效

	.el-table__fixed,
	.el-table__fixed-right {
		height: auto !important;
		bottom: 15px !important; // 滚动条高度
	}

修改效果：
在这里插入图片描述

问题二：

全局修改之后，发布过了一段时间用户提出数据右侧有空白区域遮挡

原因:用户电脑为2k大屏，足够大，所以表单并没有显示滚动条，而全局设置的fixed的bottom导致页面高度不够，形成了空白区域

在这里插入图片描述

通过搜索，发现有两种方法
1、强制设置滚动效果让左侧区域也往上缩，使左右两侧都有空白区域，能给视觉上对齐，但是会导致最后一行数据左右对不上，因为问题本质是fixed列表高度不够

.el-table__body-wrapper {
    overflow-x: scroll !important;//直接设置横轴内容滚动条（无法达到效果）
  }

2、通过将fiexd列表高度变成100%，但是造成有滚动条的时候遮挡滚动条，并非想要的效果

.el-table__fixed {
  height: 100% !important; //设置高度100%
  }

但是这个给了一个思路，因为本质问题是fiexd列表高度不足，因此可以单独设置当滚动条不出现时候的样式状态，这样就不会导致滚动条出现时候的遮挡

然后在修改的过程中还发现一个问题，当有滚动条的时候，拉到最后一行，这个左右行还是有些对不上，只是没有滚动条的时候错位更加明显

在这里插入图片描述

最终方案

	// 当表格没有滚动条时
	.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right,
	.el-table__body-wrapper.is-scrolling-none~.el-table__fixed {
		height: 100% !important;
	}
	// 优化左右对不上的问题
	.el-table__fixed-body-wrapper .el-table__body {
		padding-bottom: 15px; // 滚动条高度
	}