Tabs标签页修改样式_el-tabs 样式

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>
1
2
3
4
5
6
7
8
9
10

去除多余灰色线条

选项卡样式

只需要设置 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;
}
1
2
3
4
5
6
7
8

成品