Element组件el-scrollbar滚动条包裹el-table表格不显示横线滚动条以及滚动条重叠问题

Element UI 中解决 el-scrollbar 横向滚动条显示及重叠问题

Element组件el-scrollbar滚动条包裹el-table表格不显示横线滚动条以及滚动条重叠问题

使用scoped属性时必须使用/deep/深度选择器

 /deep/ .el-scrollbar__wrap{
  overflow-x: auto;
  height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
}
 /deep/ .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{
  white-space: nowrap;
  display: inline-block;
}
 /deep/ .el-table--scrollable-x .el-table__body-wrapper{
  overflow-x: hidden;
}
### 解决 `el-table` 在 `el-scrollbar` 中显示横向滚动条问题 为了使 `el-table` 的横向滚动条能够在 `el-scrollbar` 组件中正常显示,可以采取以下措施: #### 设置表格宽度和内容溢出属性 确保 `.el-table__body-wrapper` 和其父级容器具有适当的内容溢出处理方式。通过 CSS 控制这些元素的宽度以及如何处理超出部分的内容。 ```css .el-table__body-wrapper { overflow-x: auto; } ``` 这使得当表格内容超过容器宽度时能够触发水平滚动条[^1]。 #### 调整滚动条样式 对于自定义滚动条外观的需求,可以通过如下 CSS 实现更美观的设计: ```css /* 滚动条整体 */ .el-webkit-scrollbar { width: 6px; /* 宽度适用于所有方向 */ } /* 滑块样式 */ .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 3px; } ``` 此配置仅美化了滚动条,还保证了即使在较小空间内也能清晰可见[^2]。 #### 修改树形组件布局行为 如果项目中涉及到了 `el-tree` 或其他可能导致内部子节点过宽的情况,则需特别注意调整该类组件的行为模式。给定一个合适的最小宽度并允许其根据实际需求扩展是非常重要的: ```css .custom-tree-class { width: max-content; min-width: 100%; } ``` 上述代码片段应用于特定的 `el-tree` 类名下,可有效防止因内容过多而无法完全展示的问题发生[^3]。 最后,在应用以上修改的同时,请确认所使用的版本兼容性,并测试同浏览器下的表现一致性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端大斗师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值