el-table是Element UI库中的一个表格组件,当表格内容超出其可视区域高度时,为了使用户能够查看表格的所有内容,el-table会自动显示竖向滚动条。竖向滚动条允许用户上下滚动表格,以查看表格中不可见的行。 2. 如何在el-table中启用竖向滚动条? 要在el-table中启用竖向滚动条,你需要设置height属性来限制表格的高度。当表格内容超出这个高度时
// 当表格只有横向滚动条,没有纵向滚动条时 ::v-deep .el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right { right: 0 !important; } // 当表格只有纵向滚动条,没有横向滚动条时 ::v-deep .el-table--scrollable-y:not(.el-table--scrollable-x) { .el-table__fixed...
方法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的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。 修改前的滚动条样式 修改语句 // 设置滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10p...
el-table超出一定高度设置滚动条两种方法,设置height和max-height都可出现滚动条。 1、给table设置height属性为250,表格固定有300px这么高。 <el-table:data="tableData"height="250"border style="width: 100%"> 2、给他变了设置max-height为300,表格数据超出250。如果表格只有一条数据,且高度没有超过300.表格...
}); //跳到顶部操作 this.$refs.containerTable.bodyWrapper.scrollTop =0 //可根据页面高度设置 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 参考: 2021-12-10 el-table 行内新增,滚动条自动滚到最顶部,或者最底部
log('竖向滚动差值 _val ===>', _val) if (_val > 0) { // 跳过横向方向滚动 if (clientHeight + scrollTop + 10 > scrollHeight) { if (self.total <= self.tableData.length) { return } else { self.$emit('load-more', e) } } } }, 1000), true, ) }, handleTableResize() { ...
在Vue3环境下，调整滚动条样式则需要利用Vue的特性。首先，确保已经安装并引入所需依赖，然后在组件内部通过CSS类或自定义样式属性对el-table滚动条进行修改。实现方式如下：1）创建或引入自定义CSS类，用于设置滚动条样式。2）在组件内部的el-table标签中添加`class`属性，引用刚刚创建的自定义CSS类，以...
/*覆盖el-table的滚动条样式*/ .el-table__body-wrapper::-webkit-scrollbar { width: 8px; } .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #ccc; } .el-table__body-wrapper::-webkit-scrollbar-track { border-radius: 4px; background-color: #f5...
right: 5px!important; // 竖向滚动条宽度 height:100%; } 下方间隙样式: /deep/ .el-table__fixed { height: auto!important; bottom: 5px!important;//横向滚动条高度}/deep/ .el-table__fixed-body-wrapper { max-height: calc(100% - 36px) !important;//36px是设置的列表统一行高bottom:0!impo...