element-UI tree树形控件 修改小三角图标

el-tree默认样式

 

 .el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

/* //有子节点 且未展开 */
.el-tree .el-icon-caret-right:before {
  background: url('../../../assets/images/plus1.png') no-repeat 0 3px;
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  font-size: 16px;
  background-size: 16px;
}

/* //有子节点 且已展开 */
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url('../../../assets/images/redece.png') no-repeat 0 3px;
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  font-size: 16px;
  background-size: 16px;
}

/* //没有子节点 */
.el-tree .el-tree-node__expand-icon.is-leaf::before {
  background: #fff;
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}