elment-ui——tree自定义父子节点图标

参考：https://juejin.im/post/6844903839468879880

 

效果

 

 

 

方式——通过css样式修改

　　法一 ：设置为图片（将content值修改为' '，设置背景图），效果如上图

<style scoped> 
 /* el-tree为tree的类名 */ 

 /* 去掉旋转效果 */
  .el-tree >>> .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* 未展开父节点 */
  .el-tree >>> :not(.is-leaf).el-icon-caret-right:before {
    background: url("../../assets/images/add-circle.png") no-repeat;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 100% 100%;
  }

  /* 已展开父节点 */
  .el-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url("../../assets/images/minus-circle.png") no-repeat;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 100% 100%;
  }

  /* 子节点 */
  .el-tree >>> .is-leaf.el-icon-caret-right:before {
    background: url("../../assets/images/file-common.png") no-repeat;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 100% 100%;
  }
</style>

 

　　法二： 修改图标（引入图标库，修改content的值）

<style scoped> 
 /* el-tree为tree的类名 */ 

 /* 去掉旋转效果 */
  .el-tree >>> .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* 未展开父节点 */
  .el-tree >>> :not(.is-leaf).el-icon-caret-right:before {
    content: '***';
  }

  /* 已展开父节点 */
  .el-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: '***';
  }

  /* 子节点 */
  .el-tree >>> .is-leaf.el-icon-caret-right:before {
    content: '***';
  }
</style>