如果使用 Element UI 的 el-scrollbar 组件时,滚动条没有显示出来但页面可以滚动,可以尝试调用其 update 方法来更新滚动条。 在适当的时机(例如在数据加载完成后或组件更新后),调用 el-scrollbar 的 update 方法可以重新计算滚动条的位置和尺寸,从而实现正确的显示。可以通过以下方式来调用 update 方法: <el-scroll...
方法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...
因为表格的列数多,所以table必然会出现横向滚动条。当行数过多时,出现纵向滚动条,操作时,就需要先滚动到表格底部,然后进行左右的拉动,这样是用户操作很不方便。 应对方案 当数据过多,table的X轴滚动条不在可视区域时,给table的父级容器添加一个滚动条perfectScrollbar,然后将perfectScrollbar的scroll值赋值给table...
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即可实现想要...
当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条很难拖动,查找原因你会发现原来是固定的列把滚动条给挡住了,只有超出固定的部分滚动条才可以拖动。 解决办法 法一: 做法:修改el-table__fixed样式。 效果:就是设置bottom值,使得不盖住滚动条。
在Element UI Plus中,`el-table`组件用于显示表格数据。要调整表格滚动条的样式,你可以使用一些自定义样式来覆盖默认的样式。 以下是一个基本的示例,展示了如何使用自定义样式修改Element UI Plus中`el-table`组件的滚动条样式: ```html <template> <el-table :data="tableData" style="width: 100%" height=...
当el-table的数据条数过多的时候,我们就要固定el-table的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。 修改前的滚动条样式 修改语句 // 设置滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10...
这段代码中,我们首先选中了.el-table__body-wrapper元素,在它上面定义了横向滚动条。其中,-webkit-scrollbar表示Webkit浏览器下的滚动条样式,height属性定义了横向滚动条的高度,也可以通过width属性定义宽度。background-color表示横向滚动条的背景颜色。 接下来,我们定义了::-webkit-scrollbar-thumb以及其它相关样式,实...
如果不做样式优化,你会发现原生水平滚动条会显示出来,并且与el-scrollbar的水平滚动条重叠 那么我们加上以下样式,这也是网上大多的解决方案 .el-scrollbar__wrap { overflow-x: hidden; } // or .el-scrollbar { .el-scrollbar__wrap { overflow-x: hidden; ...