el-table横向滚动的需求背景 当el-table的列数较多,导致表格宽度超出容器宽度时,就会出现横向滚动条。然而,如果页面内容较多,导致纵向滚动条出现,用户可能需要先滚动到页面底部才能看到el-table的横向滚动条,这会影响用户体验。因此,实现el-table的横向滚动功能,特别是使其滚动条更易于访问和使用,是非常重要的。 2. ...
方法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...
scrollTop // 容器向上滚动的距离 let bottom=tabOffsetTop+tabHeight-appScrollTop-appHeight; if(bottom>0&&tabWidth>tabWinWidth){ //底部大于0并且table的宽度大于el-table视口的宽度-->显示滚动条,并隐藏自己的滚动条 let scrollBarEle=null let childEle=null tabEle.classList.add("hide-scrollBar") //...
1.这里涉及到两个Dom元素,类名分别为el-table__body-wrapper、el-table__body通过观察发现横向滚动条在于el-table__body-wrapper上,el-table__body则是实际的列表内容,当el-table__body宽度超出el-table__body-wrapper时就会出现横向滚动条。 2.因此只需要动态的修改el-table__body-wrapper的height即可实现想要...
{// opacity:1;// 默认滚动条自带透明度height:$scrollbarheight;// 横向滑块的宽度border-radius:5px;// 圆角度数// background-color:var(--el-color-primary-light-4);// 滑块背景色// box-shadow:0 0 6px rgba(0, 0, 0, 0.15);// 滑块阴影}// 纵向滚动条.el-scrollbar__bar.is-vertical ...
1、问题:el-table的合计行在横向滚动条下方 之所以会这样,是因为此时的横向滚动条为内容的横向滚动条(或者说表头、表内容和表尾三合一)。 2、解决办法 通过f12可以看到el-table的最外层表头类名为:.el-table__header-wrapper;最外层表内容的类名:.el-table__body-wrapper;(合计行位于表尾)最外层表尾的类名...
场景设定：当表格列数过多时，添加固定列功能，将序号和名称列锁定在左侧，操作列锁定在右侧，此时会自动出现横向滚动条以供浏览非固定列信息。问题描述：然而，问题在于横向滚动条在固定列的下方位置无法使用。滚动条只能在非固定列部分下方操作，无法触及固定列区域。问题分析：这是由于固定列遮挡了下方的...
场景:表格列数太多,为表格添加固定列,将序号和名称列固定在表格左侧,操作列固定在表格右侧,出现横向滚动条,可以通过拖动滚动条查看非固定列。 问题:横向滚动条在固定列下方的位置无法拖动。只有在非固定列的下方位置才可以拖动 问题原因:固定列将下方的滚动条盖住了,无法触发滚动条的滚动。
记录鼠标滚动距离然后设置给table然后让table自动更新回scroller 需要三个事件 onmousemove onmouseup onmousedown 注意点 mousemove建议挂在document上 右键+ ctrl这类特殊情况需要处理 #计算距离 通过e.clientX可以得出每次滚动的offset, 但是这个offset需要换算成具体需要滚动的scrollLeft ...