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>