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组件
目录
相关文章
Element的el-table行列错位对不齐问题处理
本文目录 1. 问题表现 2. 问题发现 3. 问题处理 4. 另一种处理方案
6463 0
Element的el-table行列错位对不齐问题处理
|
前端开发 API
解决el-table中横向滚动条无法显示的问题
解决el-table中横向滚动条无法显示的问题
4542 0
|
前端开发
el-transfer 数据量过大加载慢卡顿解决办法:el-transfer虚拟滚动懒加载的实现
el-transfer 数据量过大加载慢卡顿解决办法:el-transfer虚拟滚动懒加载的实现
1491 0
element ui table 表格高度自适应
设置element ui table 表格高度自适应
3019 0
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
5360 0
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
2211 0
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
前端开发
成功解决:如何使element中输入框颜色改变,以及如何解决使用/deep/ 出现警告信息问题
这篇文章讲述了如何在Element UI中改变输入框的背景颜色,以及如何解决使用深度选择器`/deep/`时出现的警告信息问题。文章提供了使用深度选择器修改背景颜色的CSS代码示例,展示了修改效果,并解释了如何通过在`/deep/`前加`div`或使用`::v-deep`来解决出现的红色波浪线警告问题。
成功解决:如何使element中输入框颜色改变,以及如何解决使用/deep/ 出现警告信息问题
Element表格el-table固定表头且高度占满
本文目录 1. 固定表头 2. 占满高度 3. 使用vh占满高度 4. 动态调整高度
3511 0
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
983 0

热门文章

最新文章