【Vue3.0 + Element-plus】el-tree树状结构节点前箭头样式修改

Vue2和Vue3 的修改方法略有不同

.el-tree .el-icon svg{   //原有的箭头 去掉
  display: none !important;
  height: 0;
  width: 0;
}
.el-tree-node__expand-icon{ //引入的图标（图片）size大小 => 树节点前的预留空间大小
  font-size:16px;
}

//图标是否旋转，如果是箭头类型的，可以设置旋转90度。如果是两张图片，则设为0
.el-tree .el-tree-node__expand-icon.expanded  {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.el-tree .el-tree-node__expand-icon:before { // 未展开的节点
  background: url("~@/assets/icons/public/arrow-right.png") no-repeat 0 1px;
  content: '';
  display: block;
  width: 18px;
  height: 18px;
}

.el-tree .el-tree-node__expand-icon.expanded:before { //展开的节点
  background: url("~@/assets/icons/public/arrow-down.png") no-repeat 0 0;
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  margin-top:4px;
}

.el-tree .is-leaf.el-tree-node__expand-icon::before { //叶子节点（不显示图标）
  display: block;
  background: none !important;
  content: '';
  width: 18px;
  height: 18px;
}