原因:研究下发现,是由于固定列把滚动条给遮住了,所以滚动不了。 解决方法: 1.修改el-table__fixed样式 .el-table{ .el-table__fixed{ height:auto!important; bottom:17px!important; } } 这种解决方法:就是设置bottom值,使得不盖住滚动条。缺点:不适用与含有合计的table,如果含有合计,合计也会上移。 2.修...
为了解决该问题,尝试将单位改为视窗高度(vh),以达到不同大小屏幕的高度调整。这确实解决了高度匹配问题,但在使用max-height后,组件却无法实现滚动。此时,通过调整CSS中的滚动属性,使得组件能够在设置max-height后正常滚动。然而,滚动实现后,却发现表头UI错乱,检查后发现是溢出隐藏导致。解决方法是...
问题原因:固定列将下方的滚动条盖住了,无法触发滚动条的滚动。 解决方法:改变固定列的样式,给固定列设置下边距,下边距的大小等于横向滚定条的高度 注意:这样改样式如果屏幕分辨率足够大无横向滚动条时,固定列下方就会多出一道横线,不美观,可以用样式去除 样式代码如下: //给固定列设置下边距.el-table{.el-table_...
el-table中的el-table-column提供了一个fixed属性设置固定列,但是设置了之后发现表格的滚动条无法拖动了,通过F12定位到页面元素发现是滚动条被固定列生成的元素给覆盖了,于是想办法通过修改样式的方式解决问题。 <stylelang="scss"scoped>.el-table{.el-table__fixed { // 左固定列 height:auto !important;bottom...
原因:层级问题,左侧固定列层级高,滚动条层级低,提升一下滚动条层级即可 注意要在全局样式中定义类 fixed-scrool-error 样式 .fixed-scroll-error { .el-table--scrollable-x .el-table__body-wrapper { z-index: 2; } } 运用:直接在有问题的表格最外层 标签中使用 fixed-scroll-error 即可 ...
1.导致表格错位,还要去调整错位问题,也会导致更多浏览器兼容错位问题 2.bottom的固定高度只能满足单一浏览器分辨率,不同电脑不同浏览器,分辨率不同,会出现多一些少一些等情况。 二、有效方案 通过首次进入,加载数据完成后重新渲染一次表格即可解决问题,以下是解决方案的相关代码 ...
实现 无限滚动 之后,无法横向滚动原因已经知道了,是因为给 .el-table__body 设置了 position: absolute 导致的,但是如果不设置 定位 就无法实现虚拟滚动(按照个人目前的技术储备)。 部分代码:<el-table :data="visibleList" border stripe class="data-search-table" ...
问题分析:这是由于固定列遮挡了下方的滚动条,导致滚动条无法响应滚动操作。解决策略:通过调整固定列样式,给固定列添加下边距,设置的下边距大小等同于横向滚动条的高度。这样可以确保滚动条在固定列下方的区域依然可被激活。注意事项:此方法在屏幕分辨率足够大,无需横向滚动条时,会在固定列下方产生一道...
简介:解决el-table中横向滚动条无法显示的问题 前言 之前在做项目的时候,突然发现el-table在使用的过程中遇到了一些问题,在整常情况下如果列表元素过长那么就会显示一个横向的滚动条,但是我的滚动条莫名其妙的消失了,最后解决了,所以记录一些解决的方式。