美文网首页
el-table滚动条调整后出现空隙

el-table滚动条调整后出现空隙

作者: Xbbing | 来源:发表于2022-12-13 10:58 被阅读0次

滚动条调整

  /* 设置滚动条的样式 */
    .el-table__body-wrapper::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    /* 滚动条滑块 */
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: rgba(0,0,0,.1);
        cursor: pointer;
    }

    .el-table__body-wrapper::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(0,0,0,.1);
    }

效果(注意右侧和下方都有空隙出现)

企业微信截图_2eb32365-ee56-4689-9461-c35287567a32.png

解决(加上这句css)

.el-table__fixed,.el-table__fixed-right {
    height: calc(100% - 8px) !important;    // ( 100% - 横向滚动条高度 )
    right: 8px !important; 
}

解决了但还是有遗留问题

image.png

遗留问题(当我没滚动条的时候 仍然存在right:8px; 右侧会以留有8px空白)

image.png

完美解决方案

/* 设置滚动条的样式 */
    .el-table__body-wrapper::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    /* 滚动条滑块 */
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: rgba(0,0,0,.1);
        cursor: pointer;
    }
   
    .el-table__body-wrapper::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(0,0,0,.1);
    }
     // 处理有x滚动条时高度遮挡滚动条
    .el-table--scrollable-x {
        .el-table__fixed,.el-table__fixed-right {
            height: calc(100% - 8px) !important;    
        }
    }
    // 存在滚动条的时候在right
    .el-table--scrollable-y {
        .el-table__fixed-right {
            right: 8px !important; 
        }
    }
    // 解决修改滚动条底部不对齐问题
    .el-scrollbar__wrap::-webkit-scrollbar {
        width: 8px; 
        height: 8px; 
    }

相关文章

  • vue 动态更改标签的属性

    el-table 组件里设置height,在门户页里生成滚动条,在其自己的页面里不生成滚动条。

  • 移动端

    一、 常见布局 1) 静态布局 传统web布局。固定大小,在屏幕大小进行调整是,出现滚动条,使用滚动条实现页面的浏...

  • 2019-03-25移动端适配

    一、 常见布局 1.静态布局 传统web布局。固定大小,在屏幕大小进行调整使其出现滚动条,使用滚动条实现页面的浏览...

  • 模拟滚动条与表格性能优化

    模拟滚动条是在禁用浏览器自带滚动条后使用html和js代码自定义实现滚动条效果 首先需要设置原有出现滚动条的元素 ...

  • 莫名其妙出现的浏览器滚动条

    不可预料的滚动条出现,处理方法: html页面嵌入iframe,已设置宽高的百分比后仍然出现滚动条 原因: ifr...

  • ElementUI el-table 固定列后,滚动条在固定列的

    场景:我们项目在使用elementUI的el-table时,固定了好几列,偶然发现滚动条在固定列的位置无法滚动,其...

  • Element-UI滚动条组件封装

    当内容超出固定区域后,会出现滚动条,浏览器自带的滚动条样式比较丑,所以可以使用el-scrollbar的组件进行优...

  • 溢出处理

    overflow 属性:hidden 溢出隐藏auto 溢出部分出现滚动条scroll 一直出现滚动条visibl...

  • css 实现滚动条自由

    需求:鼠标悬停出现滚动条,鼠标离开隐藏滚动条 原理: 实战:

  • 表格滚动条

    表格出现滚动条 滚动条是根据height和overflow:scroll确定的,需要滚动条的当前要有高度!!! 美...

网友评论

      本文标题:el-table滚动条调整后出现空隙

      本文链接:https://www.haomeiwen.com/subject/hfjhqdtx.html