今天老大让我给之前的表格添加表格滚动加载,而且还要固定表头,第一感觉就是先到element-ui的官网例子看看,固定表头主要用到了 height 这个属性,还有最大高度这个属性 max-height 主要是设置超过这个高度就会出现滚动条,height 是设置表格的高度,让表格的表头固定在最上面。 只要在el-table元素中定义了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...
当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条很难拖动,查找原因你会发现原来是固定的列把滚动条给挡住了,只有超出固定的部分滚动条才可以拖动。 解决办法 法一: 做法:修改el-table__fixed样式。 效果:就是设置bottom值,使得不盖住滚动条。
原因已经知道了,是因为给 .el-table__body 设置了 position: absolute 导致的,但是如果不设置 定位 就无法实现虚拟滚动(按照个人目前的技术储备)。 部分代码: <el-table :data="visibleList"border stripeclass="data-search-table"ref="dataTable":cell-style="{ 'text-align': 'center' }":header-cell-st...
注意:这样改样式如果屏幕分辨率足够大无横向滚动条时,固定列下方就会多出一道横线,不美观,可以用样式去除 样式代码如下: //给固定列设置下边距.el-table{.el-table__fixed{height:auto!important;bottom:8px!important;//具体值是多少根据你横向滚动条的高度进行设置}}//去掉固定列下方的横线.el-table__fixed::...
需要在el-tablel里实现滚动到底部加载更多数据 问题:使用element自带的无限滚动,但是实际用下来发现,指令只能作用于当前绑定的元素上,如下: <ulclass="infinite-list"v-infinite-scroll ="load"style="overflow:auto; height: 200px;"> <liv-for="(item, index) in tableData":key="index">{{ item.name }...
一、问题描述 在使用element-ui的table组件时,给表格的某些列设置了fixed属性,让列可以固定,不随着滚动条滚动移动,结果发现设置后,拖动横向的滚动条的前半部分...
可能el-table父容器或者表体容器存在隐藏或透明的滚动条,当鼠标悬停在el-table区域上方滚动时实际滚动的是它,而不是整个页面的滚动条。 有用 回复 qngyun1029: 谢谢回复,我排查下 回复2022-04-28 qngyun1029: 排查了一下,大概率不是这个问题,因为如果是一直向下滚动,table 滚到底了,那么继续滚动,页面应该也...