欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 文化 > element UI :el-table横向列内容超出宽度,滚动条不显示问题

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

2024/11/30 6:32:32 来源:https://blog.csdn.net/qq_44776454/article/details/140529257  浏览:    关键词:element UI :el-table横向列内容超出宽度,滚动条不显示问题

是否能解决你问题的前提

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

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

::-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 {
}
  • 3.查看代码表格区域是否固定宽度 或者 是否确实有内容超出情况。
  • 4.查看是否存在组件嵌套使用时的代码样式冲突情况。
  • 5.请继续百度查阅!

Alt

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com