ElementUI el-table 设置固定列,横向滚动条在固定列的位置上无法滚动的问题

简介: ElementUI el-table 设置固定列,横向滚动条在固定列的位置上无法滚动的问题

问题描述

当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条很难拖动,查找原因你会发现原来是固定的列把滚动条给挡住了,只有超出固定的部分滚动条才可以拖动。

解决办法

法一:

做法:修改el-table__fixed样式。

效果:就是设置bottom值,使得不盖住滚动条。

缺点:不适用与含有合计的table,如果含有合计,合计也会上移。

/* 给固定列设置下边距 */.el-table .el-table__fixed {
height: auto!important;
bottom: 17px!important; /* 具体值是多少根据你横向滚动条的高度进行设置 */}
/* 去掉固定列下方的横线 */.el-table__fixed::before, .el-table__fixed-right::before {
display:none;
}

法二:

做法:修改el-table__body-wrapper样式的层级,随便设个层级就可。

效果:解决滚动条被遮住的问题,同时含有合计也适用。

缺点:表头和合计那部分有阴影,中间的部分没有阴影,不过不影响效果,问题不大。

.el-table__body-wrapper {
z-index: 2;
}
  1. 法三:
    自己写table组件
目录
相关文章
|
前端开发 API
解决el-table中横向滚动条无法显示的问题
解决el-table中横向滚动条无法显示的问题
3519 0
Element的el-table行列错位对不齐问题处理
本文目录 1. 问题表现 2. 问题发现 3. 问题处理 4. 另一种处理方案
5408 0
Element的el-table行列错位对不齐问题处理
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
3707 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10069 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
9月前
|
前端开发 API
el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能,利用@sort-change实现动态数据排序,el-table排序方法,el-table可变数据的动态排序
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
定位技术
wgs84和wgs84web如何转换?
wgs84和wgs84web如何转换?
1261 60
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
1022 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
算法 安全 前端开发
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
449 0
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
XML JavaScript 前端开发
vue实战——图标,请使用SVG!(含插件vue-svg-icon的使用)
vue实战——图标,请使用SVG!(含插件vue-svg-icon的使用)
1045 1