通过浏览器中调试,发现将.el-table__body-wrapper的overflow属性隐藏再显示,横向滚动条就不会出现了,应该是重新添加overflow: auto;使得浏览器自身重新计算了table的宽度,所以宽度足够的情况下不需要显示横向滚动条; 具体做法: <!-- template --> <el-table ref="configurationTable" border :data="data" :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...
1、我们先提出一个设想,在element中,table是由很多个el-table-column构成的,那么我们可不可以通过循环el-table-column构造一个table? 2、要循环el-table-column,那么我们就需要一个由多个列组成的集合,他有3个字段,分别是列名、列显示文本和列宽,如下 tableCols1: [ { name: "date", label: "日期", width:...
拖拽事件绑定到tableBodyWrapper:确保拖拽事件绑定在实际可滚动的tableBodyWrapper上。 样式调整:使用tableBodyWrapper的样式来显示抓手光标,并在拖动时切换光标样式。 隐藏水平滚动条:通过设置overflowX: hidden来隐藏原生滚动条,但确保滚动功能仍然有效。 更新兼容手机拖拽功能 <div ref="tableContainer" class="table-con...
在Element-UI中,Table组件是一个非常有用且强大的组件,可以实现对数据表格的展示、排序、过滤等功能。其中,Table组件还支持固定列的功能,即将某一列或多列固定在表格的左侧或右侧,使得用户在横向滚动表格时,固定的列始终可见,方便用户查看。 然而,使用Table组件的固定列功能后,可能会遇到一个问题——滚动条的显示。
因为表格的列数多,所以table必然会出现横向滚动条。当行数过多时,出现纵向滚动条,操作时,就需要先滚动到表格底部,然后进行左右的拉动,这样是用户操作很不方便。 应对方案 当数据过多,table的X轴滚动条不在可视区域时,给table的父级容器添加一个滚动条perfectScrollbar,然后将perfectScrollbar的scroll值赋值给table...
针对你的问题“element table横向滚动”,我将从以下几个方面进行详细解答: 1. 确定实现横向滚动的技术方法 在Element UI或Element Plus中,实现el-table的横向滚动主要依赖于CSS样式和表格内容的宽度管理。当表格内容的总宽度超过其父容器的宽度时,浏览器会自动显示横向滚动条。因此,我们需要确保表格的容器有一个固定的...
问题分析：这是由于固定列遮挡了下方的滚动条，导致滚动条无法响应滚动操作。解决策略：通过调整固定列样式，给固定列添加下边距，设置的下边距大小等同于横向滚动条的高度。这样可以确保滚动条在固定列下方的区域依然可被激活。注意事项：此方法在屏幕分辨率足够大，无需横向滚动条时，会在固定列下方产生一道...
具体做法是,在table标签中添加属性scroll-x="true"即可。 除此之外,还可以通过剪切滚动条到table元素实现吸底。如果需要设置el-table的横向滚动条一直显示,可以设置el-tablescrollbar-always-on属性。 如果你对Element Plus的table横向滚动条使用还有疑问,可以查阅相关文档或联系Element Plus的官方技术支持。