修改前
<div class="sidebar">
...
<el-collapse v-model="activeName" accordion>
...
<el-collapse-item name="3">
<template slot="title">
<i class="header-icon el-icon-s-goods"></i>商品管理
</template>
<div><i class="el-icon-menu"></i>商品列表</div>
<div><i class="el-icon-menu"></i>分類參數(shù)</div>
<div><i class="el-icon-menu"></i>商品分類</div>
</el-collapse-item>
...
</el-collapse>
</div>
因?yàn)榻M件封裝,要使用樣式穿透來修改…
注意需要把需要樣式穿透的類單獨(dú)拿出來,不能包裹在scss格式的類里了文章來源:http://www.zghlxwxcb.cn/news/detail-517455.html
<style lang="scss" scoped>
.sidebar{
...
}
::v-deep .el-collapse-item__header{
color: #fff;
background-color: #313743 !important;
position: relative;
}
::v-deep .el-collapse-item__content{
text-align: left;
color: #fff ;
background-color: #313743;
padding-bottom: 0;
div{
height: .96rem;
line-height: .96rem;
}
}
</style>
修改后
展開…
最后這個(gè)縫隙可以用邊框來填補(bǔ),至于偽類加橫杠最好不要用,因?yàn)檎归_和折疊的時(shí)候會(huì)出現(xiàn)一瞬間白線文章來源地址http://www.zghlxwxcb.cn/news/detail-517455.html
到了這里,關(guān)于element-ui折疊面板怎么修改樣式的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!