elementui中树状图插图+线条的添加

1插图

HTML

<!-- 树形结构区域 -->
        <div class="treeList">
          <el-tree
            class="tree-container"
            :data="data"
            :props="defaultProps"
            default-expand-all
            @node-click="handleNodeClick"
            node-key="id"
            ref="tree"
          >
            <span class="custom-tree-node" slot-scope="{
    node, data }">
              <i :class="data.icon" style="color: #3d87a1; display: inline-block; margin-right: 5px"></i>
              <span style="margin-right: 5px">{
   {
    node.label }}</span>
              <i v-if="data.children == null" class="el-icon-film" style="color: #3d87a1"></i>
            </span>
          </el-tree>
        </div>

css

 .treeList {
   
        width: 240px;
        overflow: auto;
        background: #374956;
        // padding: 5px;
      }
      // 树形样式
/deep/.el-tree {
   
  position: relative;
  // height: 100%;
  cursor: default;
  background: #374956;
  color: #fff;
  font-size: 12px;
}
// 树形
.el-tree {
   
  color: #c2e5ec;
  background: #2c3d4b;
}
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
   
  background-color: #696969;
}
// 划过颜色
/deep/.el-tree-node__content:hover {
   
  background-color: #778899;
}
// 点击颜色
/deep/.el-tree-node:focus > .el-tree-node__content {
   
  background-color: #778899 !important;
}
// 树状图整体向左平移 设置高度
/deep/ .el-tree-node__content {
   
  padding-left: 10px !important;
  height: 46px;
}
// 
/deep/ .el-tree-node__children {
   
  /deep/ .el-tree-node__content {
   
    padding-left: 25px