针对你提到的 el-table 不滚动的问题,我们可以从以下几个方面进行排查和解决: 确认el-table 是否支持滚动功能: el-table 是Element UI 组件库中的一个表格组件,它本身支持滚动功能。当表格内容超出容器大小时,会自动显示滚动条。 检查el-table 的滚动设置或属性: 确保el-table 组件的 height 属性或 max-heigh...
场景:我们项目在使用elementUI的el-table时,固定了好几列,偶然发现滚动条在固定列的位置无法滚动,其他列的位置是可以滚动的,由于固定列比较多,滚动条滚不动太影响操作了。 原因:研究下发现,是由于固定列把滚动条给遮住了,所以滚动不了。 解决方法: 1.修改el-table__fixed样式 .el-table{ .el-table__fixed{ ...
在开发过程中,el-table组件作为UI中的常客,其高度设置问题常让开发者头疼。Element框架贴心地提供了height和max-height两个属性来解决高度调整,但使用时会遇到一些陷阱。遇到的第一个问题是max-height的无效应用。在尝试设置max-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...
注意:这样改样式如果屏幕分辨率足够大无横向滚动条时,固定列下方就会多出一道横线,不美观,可以用样式去除 样式代码如下: //给固定列设置下边距.el-table{.el-table__fixed{height:auto!important;bottom:8px!important;//具体值是多少根据你横向滚动条的高度进行设置}}//去掉固定列下方的横线.el-table__fixed::...
el-table中的el-table-column提供了一个fixed属性设置固定列,但是设置了之后发现表格的滚动条无法拖动了,通过F12定位到页面元素发现是滚动条被固定列生成的元素给覆盖了,于是想办法通过修改样式的方式解决问题。 <stylelang="scss"scoped>.el-table{.el-table__fixed { // 左固定列 ...
el-table控件在全面屏手机上横向滚动会在全面屏的手机上失效的问题 出现步骤1、访问localhost进入首页2、点击菜单进入订单页 localhost/order el-table横向滚动正常2、点击进入列表的详情页localhost/order/detail,手机左划返回上一页3、el-table横向滚动失效 失效后需要在浏览器上输入localhost并重新载入首页进入订单页才...
实现 无限滚动 之后,无法横向滚动原因已经知道了,是因为给 .el-table__body 设置了 position: absolute 导致的,但是如果不设置 定位 就无法实现虚拟滚动(按照个人目前的技术储备)。 部分代码:<el-table :data="visibleList" border stripe class="data-search-table" ...
2.bottom的固定高度只能满足单一浏览器分辨率,不同电脑不同浏览器,分辨率不同,会出现多一些少一些等情况。 二、有效方案 通过首次进入,加载数据完成后重新渲染一次表格即可解决问题,以下是解决方案的相关代码 <!-- 1.表格上增加ref属性 --> <el-table ref="tableRef" ……>……</el-table> ...