方法1、在el-table上手动添加滚动条 1、在el-table上方添加一个div,div的宽度和表格的宽度相同。 <div ref="topScroll" class="top-scroll"> <div class="top-scroll-content" :style="{ width: topScrollWidth }"></div> </div> <el-table ref="tableRef" :data="list" v-loading.body="listLoad...
element-ui 版本号 "element-ui": "^2.15.7" 问题跟进 审查元素,发现果然是层级覆盖问题 image.png 解决办法 加上这部分样式即可 // 解决有合计行时,横向滚动条在左侧、右侧固定列中无法选中问题.el-table__fixed,.el-table__fixed-right{pointer-events:none;>*{pointer-events:all;}} 问题代码,感兴趣的...
最近用elementui中的el-table组件,因为表格中的列比较多,所以表格会有横滚轴,这问题就来了。如果我想看拖动横滚轴的话,我必须要将页面拖到表格底部,再拖动横滚轴,然后再将页面滚到上面查看被遮挡的信息。。。 设想: 如果当数据表的数据超出窗口显示区域时,横滚轴固定显示到可视区域的底部,那就方便多了。 解决思路:...
element-ui组件table去除下方滚动条,实现鼠标左右拖拽移动表格 原创wsh华仔懒人wang2024年07月11日 17:44山东 时隔多日,再次遇到值得记录的问题。 需求 项目前端使用vue框架,页面使用element-ui进行页面快速搭建。默认的table组件当表格过长时,下方会出现横向的滚动条,便于用户对表格进行左右滑动。考虑到页面美观问题,滚...
在Element-UI中,当对表格列进行固定后,底部的横向滚动条就无法拖动了,主要的问题就是固定区域盖住了横向滚动条。 方案一:修改el-table__body-wrapper样式的层级,随便设个层级就可 ::v-deep .el-table__body-wrapper{z-index:2}//加了fixed之后失效::v-deep .el-table__fixed-footer-wrapper tbody td.cust...
简介: ElementUI el-table 设置固定列,横向滚动条在固定列的位置上无法滚动的问题 问题描述 当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条很难拖动,查找原因你会发现原来是固定的列把滚动条给挡住了,只有超出固定的部分滚动条才可以拖动。
场景:我们项目在使用elementUI的el-table时,固定了好几列,偶然发现滚动条在固定列的位置无法滚动,其他列的位置是可以滚动的,由于固定列比较多,滚动条滚不动太影响操作了。 原因:研究下发现,是由于固定列把滚动条给遮住了,所以滚动不了。 解决方法: 1.修改el-table__fixed样式 .el-table{ .el-table__fixed{...
项目前端使用vue框架,页面使用element-ui进行页面快速搭建。默认的table组件当表格过长时,下方会出现横向的滚动条,便于用户对表格进行左右滑动。考虑到页面美观问题,滚动条设置的很窄,导致用户使用时不方便进行左右滑动。 现要求,去除表格下方滚动条,用户可直接拖拽表格实现左右滑动功能。
在Element-UI中,Table组件是一个非常有用且强大的组件,可以实现对数据表格的展示、排序、过滤等功能。其中,Table组件还支持固定列的功能,即将某一列或多列固定在表格的左侧或右侧,使得用户在横向滚动表格时,固定的列始终可见,方便用户查看。 然而,使用Table组件的固定列功能后,可能会遇到一个问题——滚动条的显示。
场景:表格列数太多,为表格添加固定列,将序号和名称列固定在表格左侧,操作列固定在表格右侧,出现横向滚动条,可以通过拖动滚动条查看非固定列。 问题:横向滚动条在固定列下方的位置无法拖动。只有在非固定列的下方位置才可以拖动 问题原因:固定列将下方的滚动条盖住了,无法触发滚动条的滚动。