vue修改element面包屑样式

本文主要是介绍vue修改element面包屑样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue修改element面包屑样式

element面包屑默认后边的是浅颜色的，前边的是深色的，

现在UI设计图要修改成前面是浅色的，后面是深色的

如果直接修改样式会无法区分一级或者二级路由，用一下方法可以实现：

<el-breadcrumb separator="/"><el-breadcrumb-itemv-for="(item, index) in breadList":key="index":to="{ path: item.path }":class="index==0&&breadList.length>1?'first_route':'two_route'">{{ (item.meta.title != undefined) && item.path !== '/home' ? item.meta.title : null }}</el-breadcrumb-item></el-breadcrumb>

这样就会给一级路由加上了first_route类名，给二级路由加上了two_route的类名，然后定义样式：

我用的是scss

.el-bread-two{::v-deep .el-breadcrumb__inner{font-weight: 500 !important;color: #21212B !important;}
}
.el-bread-one{::v-deep .el-breadcrumb__inner{font-weight: 400;color: #797979;}::v-deep .el-breadcrumb__inner.is-link:hover{color: #797979;}
}

这篇关于vue修改element面包屑样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---