1.组件
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
:filter-node-method="filterNode"
@node-click="nodeClick"
node-key="id"
default-expand-all
:highlight-current="showTree"
ref="tree">
<span class="custom-tree-node" slot-scope="{ node, data }" style="display: flex;align-items: center;margin-left: 8px;">
<span class="icon">
<img src="./img/flag.png" v-if="node.level==1">
<img src="./img/protect.png" v-if="node.level==2">
<img src="./img/camer.png" v-if="node.level==3">
</span>
<span class="labelClass">{{ node.label }}</span>
<span class="play" @click="play" v-if="isShowNode(data)" style=""><img src="./img/play.png"></span>
<span class="inter" v-if="isShowNode(data)" style=""></span>
<span class="playBack" v-if="isShowNode(data)" style="" @click="playBack"><img src="./img/playback.png"></span>
</span>
</el-tree>
2.样式
/deep/ {
.el-tree-node__label {
width: 124px;
height: 18px;
font-size: 14px;
font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
font-weight: 400;
color: #FFFFFF;
line-height: 18px;
}
.el-tree {
background: #02163C;
}
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
// 设置颜色
color: #FFFFFF;
background-color: #2255a3 !important;
background: #2255a3 !important;
}
.el-tree-node:focus > .el-tree-node__content {
background-color: #2255a3;
color: #FFFFFF;
}
.el-tree-node > .el-tree-node__content:hover {
background-color: #2255a3 !important;
background: #2255a3 !important;
}
.el-tree-node.is-current > .el-tree-node__content {
background-color: #2255a3 !important;
background: #2255a3 !important;
}
.el-tree-node__content:hover {
background-color: #2255a3 !important;
background: #2255a3 !important;
}
.el-tree-node__content {
height: 40px;
}
.custom-tree-node{
height: 40px;
font-size: 14px;
font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
font-weight: 400;
color: #FFFFFF;
line-height: 18px;
}
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
//有子节点 且未展开
.el-tree .el-icon-caret-right:before {
background: url("./img/plus.png") no-repeat 0 3px;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
//有子节点 且已展开
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("./img/subtract.png") no-repeat 0 3px;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
//没有子节点
.el-tree .el-tree-node__expand-icon.is-leaf::before {
background: transparent;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
/* 点击树结构项的选中颜色 */
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #2255a3;
}
.el-tree .el-tree-node__content>.el-tree-node__expand-icon {
padding: 8px;
margin: 6px;
position: absolute;
right: 3px !important;
}
.tree {
width: 440px;
height: 849px;
border: 1px solid;
border-image: linear-gradient(132deg, rgba(126, 187, 253, 0), rgba(107, 161, 253, 1), rgba(88, 135, 254, 0), rgba(54, 89, 254, 1)) 1 1;
background: #02163C;
}
3. el-tree 自定义icon
参考网址:https://blog.csdn.net/qq_30351747/article/details/121247796
4.element-ui trr树形结构点击当前背景再点击其它地方会消失问题解决,以及修改当前背景色
参考网址:https://blog.csdn.net/weixin_44903107/article/details/105513492