<el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick" icon-class=" "></el-tree>
一个小知识 icon-class=" " 去掉前面的小三角图标 / /记得加空格
//修改字体颜色和背景色
.el-tree {
background-color: transparent;
color: #fff;
}
//修改鼠标悬停时字体颜色和背景色
::v-deep .el-tree-node__content:hover {
background-color: transparent;
color: #fff;
}
//修改选中后字体颜色和背景色
::v-deep.el-tree-node.is-current>.el-tree-node__content {
background-color: transparent !important;
}
//子节点展开后 小图标旋转
::v-deep .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
//有子节点 且未展开
::v-deep .el-tree .el-icon-caret-right:before {
background: url("../../assets/img/open.png") no-repeat;
// transform: rotate(-90deg);
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
//有子节点 且已展开
::v-deep .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("../../assets/img/down.png") no-repeat;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
//没有子节点
::v-deep .el-tree .el-tree-node__expand-icon.is-leaf::before {
background: url("../../assets/img/open1.png") no-repeat;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}