方法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...
问题: 此时,右侧商务标和基数表是动态循环出来的,左侧固定表头常规写法,如果这样写会出现一下问题 表格宽度超出,底部滚动条不会出现,表头显示不全的样式问题 image.png 解决方法: 前面固定表头也要通过动态循环的方式渲染到页面,如果表格表头有动态循环的就要保持一致, image.png 效果: image.png...
我使用的滚动条样式宽高都是5px,和下方css中的一致 解决办法: 初始版解决了之后会出现一个问题就是如果没有滚动条,则左侧固定列还会和下方边线有间隙,右侧也是如此,所以又进行了对滚动条下固定列样式的修改 初始版: 右侧间隙样式: .el-table__fixed-right { right: 5px!important; // 竖向滚动条宽度 height...
1. 横向滚动条的出现 在el-table中,当表格内容的宽度超出了容器的宽度时,横向滚动条会自动出现。这种情况经常发生在表格中有大量的列需要展示,或者表格数据的内容较为宽泛,需要横向滚动来浏览完整的内容。 2. 横向滚动条的距离问题 横向滚动条的距离指的是滚动条相对于表格左侧的位置,也就是滚动条的横向偏移量。
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") /...
/* ---el-table滚动条公共样式--- */ .el-scrollbar { // 横向滚动条 .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb { opacity: 1; // 默认滚动条自带透明度 height: 8px; // 横向滑块的宽度 border-radius: 2px; // 圆角度数 ...
这个样式通过::v-deep来深度的修改el-table中的样式,其中width修改的是纵向滚动条的宽度,而height修改的则是横向滚动条的高度。 通过这行代码修改之后滚动条就莫名奇妙的显示了出来,当然大家也可以根据选择是否要修改滚动条的颜色。有时候就是这样,一个bug能改半天,但是突然可能就一行代码就解决了问题。
[element-ui] el-table组件滚动条的宽度设置 1. 2. 3. 4. 5. 6. 参考: elementUI——el-table组件滚动条的宽度设置——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;} ...