element-ui tabs标签嵌套使用时 基础下划线不显示的问题
时间: 2024-10-19 17:15:11 浏览: 66
Element UI 的 tabs 标签组件在嵌套使用时,如果底层的 tab 内部还有另一个 tab,基础的下划线导航默认不会自动延伸到子级别的标签上。这是为了防止导航混乱,因为每个层级的 tab 都有自己的独立状态。
如果你想要在嵌套的 tabs 中也显示下划线,可以手动设置 `tab-bar-active-color` 和 `active-text-color` 属性,通常做法是在外部容器的样式中为所有层级的 tab 设置一致的样式。例如:
```css
.el-tabs__nav {
.el-submenu > .el-menu-item.is-active > a {
color: currentColor !important; /* 显示下划线 */
border-bottom: 2px solid currentColor;
}
}
```
然后确保给包含嵌套 tabs 的元素添加 `.el-tabs` 类,以便应用自定义样式。记得在每个层级的子 tabs 也需要有对应的激活状态,比如通过监听 `@current-change` 事件来更新样式。
阅读全文