【elementui】记录el-table设置左、右列固定时,加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法

当前elementui版本:2.8.2

  • 现象:此处el-table__body-wrapper默认的滚动条宽度为8px,我加大到10px,如果不设置fixed一切正常,设置fixed后会被遮挡一点

  • el-table__fixed-right::before, .el-table__fixed::before

  • 设置css解决遮挡

javascript 复制代码
// 左固定列
.el-table__fixed {
	height: calc(100% - 10px) !important;
}

// 右固定列
.el-table__fixed-right {
	height: calc(100% - 10px) !important;
	right: 10px !important;
}

// 设置右固定列才会出现该元素,不然不用写
.el-table__fixed-right-patch {
	width: 10px !important;
}

// 设置这一句是因为,当滚动条向下滑动时,固定列的行会和其他列的行错位,设置完这个就不错位了
.el-table__fixed-body-wrapper .el-table__body {
	padding-bottom: 10px;
	box-sizing: border-box;
}

// 设置这句是因为上第二张图,在某些场景下那条线会很突兀,就设置颜色透明让视觉上看不见   
.el-table__fixed-right::before, .el-table__fixed::before {
	background: transparent !important;
}

// 滚动条样式
.el-table__body-wrapper::-webkit-scrollbar {
	width: 10px; 
	height: 10px; 
	background: transparent;
	border-radius: 4px;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
	// background-color: rgba(94, 171, 246, .79);
	border-radius: 12px;
}
  • 如果能够确保表格在任何屏幕下都会出现横向滚动和竖向滚动,那么上述设置已经够了。

  • 但我有一张表可以筛选列,就导致当列选的比较少时不会出现横向滚动,如果最后一行数据恰巧换行,有部分文字正好会被固定列的height: calc(100% - 10px) !important遮挡住,如下图所示,所以就要兼容两种情况

  • 由于我发现,出现横向滚动条时,el-table__body-wrapper会出现类名is-scrolling-right或is-scrolling-left或is-scrolling-middle,无横向滚动时,el-table__body-wrapper的类名叫做is-scrolling-none,就可以利用这一点再设置无横向滚动时的css
javascript 复制代码
// ~:用于选择某个元素之后的兄弟元素
// el-table__fixed是左固定列,要设置右固定列就是写:
// .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 {
		right: 2px !important;
	}
}

最后:反正具体css设置还要看自己项目的当前情况,但是方法是这么个方法,可以通过这些类名去设置以达到目的

相关推荐
牧羊狼的狼2 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手3 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲3 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell4 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮5 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel6 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常6 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip6 小时前
JavaScript事件流
前端·javascript
小菜全6 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C6 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件