el-table横向滚动条不显示

最新推荐文章于 2025-03-31 14:57:02 发布

@小花睡不好

最新推荐文章于 2025-03-31 14:57:02 发布

阅读量3.3k

点赞数 2

分类专栏： html+css 文章标签： elementui css

本文链接：https://blog.csdn.net/weixin_44553861/article/details/130707779

版权

html+css 专栏收录该内容

1 篇文章

订阅专栏

当在Vue应用中使用el-table组件并设置了表格的高度和宽度，如果内容超出范围，可能遇到横向滚动条不显示的情况。为了解决这个问题，可以通过CSS自定义滚动条的宽度和样式，例如设置`::v-deep.el-table__body-wrapper::-webkit-scrollbar`的宽度和`::v-deep.el-table__body-wrapper::-webkit-scrollbar-thumb`的背景颜色及边框圆角。

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

问题

在Vue中使用el-table，设置表格高度和宽度后，表格内容超出，横向滚动条没有显示，无法拖动
在这里插入图片描述

解决方法：

/* 设置滚动条宽度和高度 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 20px; /* 横向滚动条 */
    height: 8px; /* 纵向滚动条 必写 */
}
/* 设置滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #dde;
    border-radius: 3px;
}