这里涉及到两个Dom元素,类名分别为el-table__body-wrapper、el-table__body通过观察发现横向滚动条在于el-table__body-wrapper上,el-table__body则是实际的列表内容,当el-table__body宽度超出el-table__body-wrapper时就会出现横向滚动条。 因此只需要动态的修改el-table__body-wrapper的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...
scrollTop // 容器向上滚动的距离 let bottom=tabOffsetTop+tabHeight-appScrollTop-appHeight; if(bottom>0&&tabWidth>tabWinWidth){ //底部大于0并且table的宽度大于el-table视口的宽度-->显示滚动条,并隐藏自己的滚动条 let scrollBarEle=null let childEle=null tabEle.classList.add("hide-scrollBar") //...
我使用的滚动条样式宽高都是5px,和下方css中的一致 解决办法: 初始版解决了之后会出现一个问题就是如果没有滚动条,则左侧固定列还会和下方边线有间隙,右侧也是如此,所以又进行了对滚动条下固定列样式的修改 初始版: 右侧间隙样式: .el-table__fixed-right { right: 5px!important; // 竖向滚动条宽度 height...
或者参考以下的css样式代码: // 滚动条的宽度/deep/.el-table__body-wrapper::-webkit-scrollbar{width:8px;// 横向滚动条height:8px;// 纵向滚动条 必写}// 滚动条的滑块/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px;} ...
通过CSS样式可以轻松地对横向滚动条进行样式定制,比如调整滚动条的颜色、宽度、样式等。具体代码如下: ```css /* 横向滚动条样式 */ #tableWrapper::-webkit-scrollbar { height: 12px; /* 定义滚动条高度 */ background-color: #f5f5f5; /* 滚动条背景颜色 */ } #tableWrapper::-webkit-scrollbar-thum...
1.横向滚动条且左侧列固定时,滚动条的可操作区域被遮挡,必须点击空白处才可实现拖动,更改样式解决: /deep/#outputTable .el-table__fixed { .el-table { .el-table__fixed { height:auto !important; bottom:17px !important; } } } /deep/#outputTable .el-table__body-wrapper { ...
设置原因。其中在使用elementuitable时，其中横向滚动条样式和纵向滚动条样式不同，是因为设置原因导致，是可以样式中进行更改的。
.el-table .el-scrollbar__wrap { border-radius: 0px !important; /*滚动条边框的圆角大小*/ border: 1px solid #e4e4e4 !important; /*滚动条边框的颜色*/ } 请将以上CSS代码添加到您的项目中的CSS文件中,并根据需要修改样式。 记住,使用`!important`可以覆盖ElementUI默认样式,确保您的样式生效。©...
自定义element-ui表格滚动条组件 by Jdes on 2019-02-18 由于npm的 OTP 验证问题,原来的el-table-bar迁移至el-table-bar-base请使用者删除原始包后下载el-table-bar-base原有功能不变 update Log v2.0.6 · 说明文档更新 v2.0.5 · 修复offsetLeft在嵌套路由下出现的计算偏差 ...