el-table 最右侧固定列和出现滚动条时产生空隙解决方法

最新推荐文章于 2025-04-10 10:18:30 发布

前端小金丝

最新推荐文章于 2025-04-10 10:18:30 发布

阅读量1.4k

点赞数 10

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/ljb376766764/article/details/135413394

版权

本文介绍了如何修改Vue表格中的滚动条样式，包括设置宽度、滑块颜色，以及处理x和y轴滚动时的高度调整，以解决滚动条显示和布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/* 设置滚动条的样式 */
    .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; 
    }

修改了滚动条样式可以解决这个bug放大看很明显