element-ui中Tree树形结构修改三角形图标、增加竖线、横线

最终效果： 

element-ui图标对应的content在目录

node_modules/element-ui/packages/theme-chalk/src/icon.scss

<template>
 <div class="indicator-tree">
   <el-tree
      :data="warningProcessData"
      node-key="id"
      default-expand-all
      :props="{
          children: 'children',
          label: 'item_name'
      }"
      @node-drag-end="handleDragEnd"
      :draggable="false"
      :expand-on-click-node="false"
      @node-click="nodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }">
           <span :class="['tree-node', currentNodeKey === node.id ? 'active-tree-node' : '']">{{ node.label }}</span>
        </span>
    </el-tree>
 </div>
</template>

<script>
data() {
    return {
      // 树列表
      warningOptions:[
        {
          "item_id": "005",
          "item_name": "不急不急",
          "children": []
        },
        {
          "item_id": "007",
          "item_name": "一级1",
          "children": [
            {
              "item_id": "007_001",
              "item_name": "二级1",
              "children": []
            },
            {
              "item_id": "007_002",
              "item_name": "二级2",
              "children": []
            }
          ]
        },
        {
          "item_id": "007",
          "item_name": "一级1",
          "children": [
            {
              "item_id": "007_001",
              "item_name": "二级1",
              "children": [
                {
                "item_id": "007_001",
                "item_name": "三级1",
                "children": []
              }
              ]
            },
            {
              "item_id": "007_002",
              "item_name": "二级2",
              "children": []
            }
          ]
        }
      ],
    }
}

</script>


<style lang="scss" scoped>
.indicator-tree {
    ::v-deep{
        // 修改图标
        .el-tree .el-tree-node__expand-icon.expanded {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        .el-tree .el-icon-caret-right:before {
          content: "\e783";
          font-size: 18px;
        }
        .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
          content: "\e781";
          font-size: 18px;
        }
        // 修改选中样式
        .el-tree-node__content:hover {
          background-color: #deefff;
          border-radius: 2px;
          color: #1381e1 !important;
          font-size: 14px;
        }
        .el-tree-node:focus>.el-tree-node__content{
          background-color: #deefff !important;
          color: #1381e1 !important;
        }

        // 设置树形组件节点的定位和左内边距
        .el-tree-node {
          position: relative;
        }
      
        // 设置树形组件节点的 before 伪类的样式
        .el-tree-node:before {
          width: 1px;
          height: 100%;
          content: '';
          position: absolute;
          top: -38px;
          bottom: 0;
          left: 0;
          right: auto;
          border-width: 1px;
          border-left: 1px solid #d9d9d9ab;
        }
      
        // 设置树形组件节点的 after 伪类的样式
        .el-tree-node:after {
          width: 13px;
          height: 13px;
          content: '';
          position: absolute;
          left: 0;
          right: auto;
          top: 12px;
          bottom: auto;
          border-width: 1px;
          border-top: 1px solid #d9d9d9ab;
        }
      
        // 设置树形组件首节点的左边框不显示
        .el-tree > .el-tree-node:before {
          border-left: none;
        }
      
        // 设置树形组件首节点的顶部边框不显示
        .el-tree > .el-tree-node:after {
          border-top: none;
        }
      
        // 设置树形组件末节点的 before 伪类的高度
        .el-tree .el-tree-node:last-child:before {
          height: 50px;
        }
      
        // 设置树形组件节点字体大小、以及取消左内边距
        .el-tree .el-tree-node__content {
          color: #000;
          font-size: 14px;
          padding-left: 0 !important;
        }
      
        // 设置树形组件孩子节点左内边距
        .el-tree .el-tree-node__children {
          padding-left: 11.5px;
          .el-tree-node{
            padding-left: 13px;
          }
        }
      
        // 设置树形组件复选框左右外边距
        .el-tree .el-tree-node__content > label.el-checkbox {
          margin: 0 5px 0 5px !important;
        }
      
        // 设置树形组件展开图标定位、图层、内边距
        .el-tree .el-tree-node__expand-icon {
          position: relative;
          z-index: 99;
        }
      
        // 设置树形组件叶子节点的默认图标不显示
        .el-tree .el-tree-node__expand-icon.is-leaf {
          display: none;
        }
      
        // 设置树形组件叶子节点的横线
        .el-tree .leaf-node-line {
          width: 23px;
          height: 13px;
          content: '';
          position: absolute;
          left: 13px;
          right: auto;
          top: 12px;
          bottom: auto;
          border-width: 1px;
          border-top: 1px solid #d9d9d9ab;
        }
      
        // 设置树形组件有叶子节点的左外边距
        .el-tree .el-tree-node__content:has(.is-leaf){
          padding-left: 8px !important;
        }
    }
}
</style>