Tabs标签页修改样式

原创已于 2022-06-27 18:58:30 修改

· 3.6k 阅读

13 ·

版权

文章标签：

#vue.js #javascript #elementui

于 2021-08-09 11:23:58 首次发布

css 专栏收录该内容

9 篇文章

订阅专栏

ElementUI 的 Tabs标签页修改样式

去除底部灰色线条

在这里插入图片描述

<style lang="scss" scoped>
//去掉el-tab-pane底部灰色线条
/deep/.el-tabs__nav-wrap::after {
  height: 0 !important;
}
//修改样式
/deep/ .el-tabs__item {
  padding: 0 20px 0 0;
}
</style>

在这里插入图片描述

去除多余灰色线条

选项卡样式

只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。

在这里插入图片描述

不想要旁边的线条

// 先把整体的线去掉
/deep/.el-tabs--card > .el-tabs__header{
  border: none !important;
}
// 再为tabs添加border-bottom
/deep/ .el-tabs__nav{
  border-bottom: 1px solid #dfe4ed !important;
}