el-tree 的樣式修改之旅
原始樣式如下圖:

我想要實現的樣子如下圖:

首先分析一下想要實現的效果圖:1,想要從原始效果到效果圖的樣子都需要修改那些地方
2,都涉及到那些樣式問題
其次簡要說一下本人在實踐中都遇到了那些樣式問題:
1,修改el-tree中checkbox選中時的背景顏色,選中的時的對鉤顏色
2,一級節點和二級節點的背景顏色設置
3,鼠標滑過,鼠標點擊之后出現白色背景的問題
4,el-tree中倒三角的顏色,位置設置問題
等等。。。。。廢話不多說了直接上代碼
此代碼為問題3:
.el-tree-node:focus>.el-tree-node__content { background-color: transparent ; //當選中樹節點時的顏色改變,默認為白色 } .el-tree-node .is-expanded .is-current .is-focusable{ margin-bottom: 10px; }
.el-tree-node__expand-icon {
position: absolute; //設置倒三角的位置 目前我設置的是讓倒三角在右側顯示
right: 6%;
}
//一級節點選擇器
.el-tree-node .el-tree-node__content {
background-image: linear-gradient(to right, rgba(0,136,210, 0.5), rgba(0,25,46, 0.5));
font-weight: bold;
margin-bottom: 3px;
color: #00eaff;
font-size: 16px;
}
.el-tree-node__content > label.el-checkbox {
margin-left: 20px; //checkbox 距離左側的位置
}
//二級節點選擇器
.el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__content{
margin: 0px !important;
font-weight: 100;
background-image: linear-gradient(to right, rgba(0,136,210, 0.2), rgba(0,25,46, 0.2)) !important;
//設置二級節點漸變背景顏色透明度為20%
}
.el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__content .el-tree-node__label{
font-size: 14px; //設置二級節點文字大小
color: #00eaff;//設置二級節點文字顏色
}
.el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__content .el-checkbox__inner{
width: 14px; //設置二級節點checkbox大小
height: 14px;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
background: #00eaff; //修改選中時checkbox背景顏色
&::after {
border-color: #002237; //修改checkbox對鉤顏色
}
}
.el-tree-node__expand-icon {
color: #0095A8; //修改el-tree樹結構自帶的三角圖標的顏色
}
.el-tree-node__expand-icon.is-leaf::before {
display: none; //修改el-tree樹結構自帶的三角圖標的顏色,之后會出現一個問題,會將葉子節點(沒有子節點的)也給添加了三角圖標,審查元素發現所有節點的圖標都帶有一樣的類名,只要修改樣式就會更改所有圖標,不管是否是葉子節點.所以還要加上下面的代碼,隱藏葉子節點的三角圖標才能行.
}
好了我懶得介紹了。。。。。自認為我注釋寫的已經很清楚了,大家應該都能看的懂,真看不懂的話,建議多實踐,畢竟實踐才是檢驗真理的唯一標準!!!!!

浙公網安備 33010602011771號