是Element UI库中的一个表格组件,它支持横向滚动条功能。当表格内容宽度超过容器宽度时,会自动显示横向滚动条。 2. 在el-table组件中设置相关属性以启用横向滚动条 要在el-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...
1、访问localhost进入首页2、点击菜单进入订单页 localhost/order el-table横向滚动正常2、点击进入列表的详情页localhost/order/detail,手机左划返回上一页3、el-table横向滚动失效 失效后需要在浏览器上输入localhost并重新载入首页进入订单页才会恢复正常滚动,但进详情页回退后还是会失效 滚动永久生效 PS:更换360移动端...
实现 无限滚动 之后,无法横向滚动 原因已经知道了,是因为给 .el-table__body 设置了 position: absolute 导致的,但是如果不设置 定位 就无法实现虚拟滚动(按照个人目前的技术储备)。 部分代码: <el-table :data="visibleList"border stripeclass="data-search-table"ref="dataTable":cell-style="{ 'text-align...
简介:解决el-table中横向滚动条无法显示的问题 前言 之前在做项目的时候,突然发现el-table在使用的过程中遇到了一些问题,在整常情况下如果列表元素过长那么就会显示一个横向的滚动条,但是我的滚动条莫名其妙的消失了,最后解决了,所以记录一些解决的方式。
工作中用到的el-table显示大批量数据的时候,一页放不下,一般性的处理方案是限定了高,让表格固定表头之后内部可以滚动,不过因为实际操作中样式的问题,需要我把整个表格高度全部显示出来,这样就造成了一个问题,就是横向滚动不方便 不过作为mac用户已开始没啥感觉,但是被用windows的同事吐槽了好久,于是终于决定花半天时...
当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条很难拖动,查找原因你会发现原来是固定的列把滚动条给挡住了,只有超出固定的部分滚动条才可以拖动。 解决办法 法一: 做法:修改el-table__fixed样式。 效果:就是设置bottom值,使得不盖住滚动条。
/* 表格不出现横向滚动条 */.el-table--scrollable-x.el-table__body-wrapper{overflow-x: hidden; } 2.设置最大列宽,查阅element官网文档,header-dragend事件可以查看修改前后的列宽 添加事件header-dragend 控制台打印结果 headerDragend:function(newWidth, oldWidth, column) {console.log(newWidth);console...