这里涉及到两个Dom元素,类名分别为el-table__body-wrapper、el-table__body通过观察发现横向滚动条在于el-table__body-wrapper上,el-table__body则是实际的列表内容,当el-table__body宽度超出el-table__body-wrapper时就会出现横向滚动条。 因此只需要动态的修改el-table__body-wrapper的height即可实现想要的效果。
方法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中,当对表格列进行固定后,底部的横向滚动条就无法拖动了,主要的问题就是固定区域盖住了横向滚动条。 方案一:修改el-table__body-wrapper样式的层级,随便设个层级就可 ::v-deep .el-table__body-wrapper{z-index:2}//加了fixed之后失效::v-deep .el-table__fixed-footer-wrapper tbody td.cust...
当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条很难拖动,查找原因你会发现原来是固定的列把滚动条给挡住了,只有超出固定的部分滚动条才可以拖动。 解决办法 法一: 做法:修改el-table__fixed样式。 效果:就是设置bottom值,使得不盖住滚动条。
1. Re:elementUi的el-table横向滚动条始终位于可视区域 大佬我用了也不行,出现了自定义的横向滚动条,但是没有固定在可视区域最底部 --一盆丫丫独断万古 2. Re:elementUI的DateTimePicker设置分钟步长为五分钟 @scainiao event对象有个path... --卷叶小树 3. Re:linux命令 求回复啊 私信了 有个问题 --448...
"element-ui": "^2.15.7" 问题跟进 审查元素,发现果然是层级覆盖问题 image.png 解决办法 加上这部分样式即可 // 解决有合计行时,横向滚动条在左侧、右侧固定列中无法选中问题.el-table__fixed,.el-table__fixed-right{pointer-events:none;>*{pointer-events:all;}} ...
</el-table-column> </el-table> 通过设置表格的高度和固定表头属性,可以实现表格内容部分出现横向滚动条的效果。 三、注意事项 在使用elementui中表格的横向滚动条功能时,需要注意以下几点: 1. 考虑用户体验 在设置表格的横向滚动条时,需要考虑用户体验,避免表格内容过于宽泛,导致用户在使用滚动条查看表格内容时出现...
场景:表格列数太多,为表格添加固定列,将序号和名称列固定在表格左侧,操作列固定在表格右侧,出现横向滚动条,可以通过拖动滚动条查看非固定列。 问题:横向滚动条在固定列下方的位置无法拖动。只有在非固定列的下方位置才可以拖动 问题原因:固定列将下方的滚动条盖住了,无法触发滚动条的滚动。
1.横向滚动条且左侧列固定时,滚动条的可操作区域被遮挡,必须点击空白处才可实现拖动,更改样式解决: /deep/#outputTable .el-table__fixed { .el-table { .el-table__fixed { height:auto !important; bottom:17px !important; } } } /deep/#outputTable .el-table__body-wrapper { ...
项目前端使用vue框架,页面使用element-ui进行页面快速搭建。默认的table组件当表格过长时,下方会出现横向的滚动条,便于用户对表格进行左右滑动。考虑到页面美观问题,滚动条设置的很窄,导致用户使用时不方便进行左右滑动。 现要求,去除表格下方滚动条,用户可直接拖拽表格实现左右滑动功能。