当前位置：首页 > news >正文

element UI ：el-table横向列内容超出宽度，滚动条不显示问题

news 来源：原创 2024/9/19 10:10:11

是否能解决你问题的前提

**看到这篇文章的解决问题的方案之前，请先回忆你是否在项目中的全局样式或者私有组件中去单独设置过滚动条样式。如果有 请继续往下看：**

单独设置过滚动条样式代码实例：

::-webkit-scrollbar {/*滚动条整体样式*/width: 6px;/*高宽分别对应横竖滚动条的尺寸*/height: 1px;
}::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 5px;background: #cfcbcb;
}::-webkit-scrollbar-track {/*滚动条里面轨道*/border-radius: 6px;background: #ededed;
}

上面修改样式让滚动条变细由默认的20px变成6px；

问题现象

在这里插入图片描述

如上图实例：表格横向列内容已经超出表格但是却没有出现滚动条。

需要说明的是，如果是正常情况，el-table 在设置了固定宽度后，如果列内容的每一个 el-table-column 标签也设置了固定宽度，且所有列的宽度之和大于了表格el-table 的固定宽度的情况下，el-table组件会默认出现横向的滚动条并可实现滚动查看遮挡的列内容区域。

再你 没有去修改el-table内置组件样式的前提下 ，你如果 还修改了页面滚动条样式 ，那么el-table横向内容超过却不出现滚动条的原因就可能是你 滚动条样式问题。

问题解决

让我们看上面修改滚动条样式的代码，其中

::-webkit-scrollbar {/*滚动条整体样式*/width: 6px;/*高宽分别对应横竖滚动条的尺寸*/height: 1px;
}

如果是竖向滚动条那么其宽度就是 6px，但是这里如果是横向的滚动条，那么滚动条的高度却是 1 px 一条线，如果你的表单恰巧也是带边框的，那么高度为1 px 的滚动条就和边框重合了，并且点击也不会获取焦点，就和没有滚动条一样。所以这里我们只需要将这里滚动条的高度设置为6 px 即可解决问题。

::-webkit-scrollbar {/*滚动条整体样式*/width: 6px;/*高宽分别对应横竖滚动条的尺寸*/height: 6px;
}

其他可能出现的此类问题的原因

1.查看代码看是否有隐藏页面滚动条的逻辑
2.查看代码是否修改了el-table内置样式，例如修改了以下类有关overflow相关的属性：

/* 设置el-table 表头的样式 */
::v-deep .el-table__header-wrapper {
}
/* 设置el-table 表主体的样式 */
::v-deep .el-table__body-wrapper {
}
/* 设置滚动条宽度和高度 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
}
/* 设置滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
}