el-tree自定义显示图标及文字颜色等

页面代码

  **  {{node.label}} {{node.label}} 
  **

样式设置

 //修改Tree样式
 
 .el-tree-node {
     .el-tree-node__expand-icon.is-leaf{
     display: none;
 }
 //设置叶子节点显示checkbox，设置checkbox与文字的间距
  .is-leaf + .el-checkbox .el-checkbox__inner{
    display: inline-block;
    margin:0 5px;
  }//设置其他节点不显示checkbox
  .el-checkbox .el-checkbox__inner{
	  display: none;
  }
  //设置tree文字的大小
  .el-tree-node__label{
      font-size: 14px;
      font-weight: 600;
  }
}
// 设置虚线
.el-tree-node{
  position: relative;
  padding-left: 0px !important;
  margin-bottom: 6px;
}
.el-tree-node__children{
  padding-left: 35px;
}
.el-tree-node :last-child:before {
  height: 38px;
}
.el-tree>.el-tree-node:before{
  border-left: none;
}
.el-tree>.el-tree-node:after{
  border-top: none;
}
.el-tree-node:before,.el-tree-node:after{
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
.tree :first-child .el-tree-node:before{
  border-left: none;
}
// //竖直的虚线
// .el-tree-node:before {
//   border-left: 1px dashed rgb(191,191,191);
//   bottom: 0px;
//   height: 100%;
//   top: -25px;
//   width: 1px;
// }
// //水平的虚线
// .el-tree-node:after {
//   border-top: 1px dashed rgb(191,191,191);
//   height: 20px;
//   top: 13px;
//   width: 10px;
// }
// //修改展开图标
// .el-tree .el-icon-caret-right:before 
// {  
//     background: url("../../assets/img/展开.png") no-repeat 0 1px;
//     content: '';
//     display: block;
//     width: 14px;
//     height: 14px;
//     font-size: 14px;
//     background-size: 14px;
// }
// //修改收起图标
// .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before 
// {  
//     background: url("../../assets/img/收起.png") no-repeat -1px 0px;  
//     content: '';  
//     display: block;  
//     width: 14px;  
//     height: 14px;  
//     font-size: 14px;  
//     background-size: 16px;
// }//修改原本点击展开或收起图标会旋转的样式
// .el-tree .el-tree-node__expand-icon.expanded 
// {  
//     -webkit-transform: rotate(0deg);  
//     transform: rotate(0deg);
// }
.slot-t-node span{
  color:#333;
  font-size:14px;
  font-family: 'Microsoft YaHei' !important
}
.el-tree-node__expand-icon{
  color: #333 !important;
  font-size: 21px !important;
}
.el-tree-node__content>.el-tree-node__expand-icon{
  padding:0px !important;
}
//设置对齐图标
.fa{
  padding-left:3px !important; 
}

展示图片