1.改變el-collapse的樣式
這里改變了el-collpase的背景顏色
.el-collapse >>> .el-collapse-item
background-color: #e9eef3 !important
.el-collapse-item >>> .el-collapse-item__header
background-color: #e9eef3 !important
.el-collapse-item >>> .el-collapse-item__wrap
background-color: #e9eef3 !important
原理：
.el-collpase
首先可以看到el-collapse是最外層的包裹
圖片.png
.el-collapse-item
然后發(fā)現(xiàn)el-collpase-item負責(zé)了每一塊的背景顏色
圖片.png
可是光改變el-collapse的背景顏色并沒有效果
.el-collapse-item__wrap
.el-collapse-item__header
圖片.png
圖片.png
頭部部分拉開覆蓋了頭部部分的模塊，會發(fā)現(xiàn)有個模塊含有了類名
圖片.png
2.改變分隔線
.el-collpase里有個屬性負責(zé)整個展開版的上下分隔線
圖片.png
wrap里有每個區(qū)域的下分隔線
圖片.png
但是修改后并沒有效果
圖片.png
原來是展開后的下分隔線
圖片.png
未展開的下分隔線在header那
圖片.png
可是修改后header的分隔線不消失
圖片.png
發(fā)現(xiàn)element-ui使用了is-active（.el-collapse-item__header.is-active）來控制
圖片.png
最終效果完成：
圖片.png
總結(jié)：
可以發(fā)現(xiàn)，這里修改的屬性全在header和wrap里，那么collapse組件也就是
未展開前：header
展開后：header和wrap控制
展開和未展開的樣式變化：is-active
