项目前端使用vue框架,页面使用element-ui进行页面快速搭建。默认的table组件当表格过长时,下方会出现横向的滚动条,便于用户对表格进行左右滑动。考虑到页面美观问题,滚动条设置的很窄,导致用户使用时不方便进行左右滑动。 现要求,去除表格下方滚动条,用户可直接拖拽表格实现左右滑动功能。 表格设置固定表头和列,实践证明并...
方法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...
通过浏览器中调试,发现将.el-table__body-wrapper的overflow属性隐藏再显示,横向滚动条就不会出现了,应该是重新添加overflow: auto;使得浏览器自身重新计算了table的宽度,所以宽度足够的情况下不需要显示横向滚动条; 具体做法: <!--template--><el-table ref="configurationTable"border:data="data":height="height...
.el-table{ ::v-deep .el-table__fixed{ height: auto!important; bottom: 16px;//横向滚动条高度} ::v-deep .el-table__fixed::before { display:none; // 边框显示问题 } ::v-deep .el-table__fixed-right::before { display:none; } } 记录进步!!!
在Element-UI中,Table组件是一个非常有用且强大的组件,可以实现对数据表格的展示、排序、过滤等功能。其中,Table组件还支持固定列的功能,即将某一列或多列固定在表格的左侧或右侧,使得用户在横向滚动表格时,固定的列始终可见,方便用户查看。 然而,使用Table组件的固定列功能后,可能会遇到一个问题——滚动条的显示。
1、我们先提出一个设想,在element中,table是由很多个el-table-column构成的,那么我们可不可以通过循环el-table-column构造一个table? 2、要循环el-table-column,那么我们就需要一个由多个列组成的集合,他有3个字段,分别是列名、列显示文本和列宽,如下
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组件在内容过长时，下方会显示一个窄小的滚动条，虽然初衷是为了方便左右滑动，但在实际应用中，滚动条的存在影响了页面美观。为了提升用户体验，我们希望去除滚动条，直接通过鼠标或触屏拖拽来实现表格的左右滑动。解决方案是...
.el-table--scrollable-y .el-table__body-wrapper { padding-right: 20px; } .el-table--scrollable-y .el-table__body-wrapper:hover { padding-right: 0; } 第三种方法:使用el-scrollbar组件,这也是官网在使用的,但是可能要啃下源码,再就是表头可能也会一起滚动,需要控制下样式。 推荐使用第一种,简...
场景:表格列数太多,为表格添加固定列,将序号和名称列固定在表格左侧,操作列固定在表格右侧,出现横向滚动条,可以通过拖动滚动条查看非固定列。 问题:横向滚动条在固定列下方的位置无法拖动。只有在非固定列的下方位置才可以拖动 问题原因:固定列将下方的滚动条盖住了,无法触发滚动条的滚动。