element树组件自定义图标、字体大小高亮以及竖线设置

效果

html

<template>
  <div class="list-left">
    <el-tree
      v-if="treeData"
      :expand-on-click-node="false"
      highlight-current
      :data="treeData"
      :props="defaultProps"
      :indent="0"
      @node-click="handleNodeClick"
    >
      <template v-slot="{ node, data }">
        <span class="custom-tree-node">
          <span>
            <!-- <img v-if="!data.children&&node.level!==1" src="" alt="">  //没有子级的图标，我这里没有子级不设置图标-->
            <!-- 一级关闭图标 -->
            <img v-if="node.expanded&&node.level==1" src="@/icons/png/tree-close.png" alt="">
            <!-- 一级展开图标 -->
            <img v-else-if="!node.expanded&&node.level==1" src="@/icons/png/tree-open.png" alt="">
            <!-- 二级关闭图标 -->
            <img v-else-if="node.expanded&&node.level==2" src="@/icons/png/tree-close1.png" alt="">
            <!-- 二级展开图标 -->
            <img v-else-if="!node.expanded&&node.level==2" src="@/icons/png/tree-open1.png" alt="">
          </span>
          <div class="label" :style="fontSize(node,data)">{{ node.label }}</div>
        </span>
      </template>
    </el-tree>
  </div>
</template>

js

<script>
import { getTreeData } from '@/api/user'
export default {
  name: 'ListLeft',
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    async getTreeData() {
      const res = await getTreeData()
      this.treeData = JSON.parse(res.data)
    },
    handleNodeClick() {
      console.log('点击节点')
    },
    // 每一级字体变小
    fontSize(node, data) {
      if (node.level === 1 || node.level === 2) return 'font-size:14px' // 一二级字体
      return 'font-size:' + (14 - node.level * 2) + 'px' // 三级以下字号减小
    }
  }
}

CSS

<style lang="scss" scoped>
.custom-tree-node {
  display: flex;
  img {
    width: 14px;
    height: 14px;
  }
  .label {
    margin-left: 8px;
  }
}
:deep(.el-tree) {
  .el-tree-node {
    position: relative;
    padding-left: 0px;
  }
  .el-tree-node__children {
    padding-left: 22px;
  }

  // 自定义图标中隐藏自带箭头
  .el-tree-node__content>.el-tree-node__expand-icon {
    position: absolute;
    opacity: 0;
  }
  // 禁止旋转
  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  // 节点高度与边距
  .el-tree-node__content {
    height: 30px;
  }
  .el-tree-node {
    margin: 5px 0;
  }
  //高亮字体颜色
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    color: #ee7355 !important;
    background-color: transparent; // 设置选中背景颜色
  }
  // 设置竖线
  .el-tree-node .is-focusable:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: -15px;
    border-left: 1px solid #e5e7ec;
    height: calc(100% + 3px);
  }
}

.list-left {
  width: 214px;
  height: auto;
  margin: 10px 0 20px 20px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}

// 鼠标移入高亮
.custom-tree-node:hover {
  color: #ee7355 !important;
}
</style>

=========================================================================

如果只使用一种图标就可以直接用另一种

html

    <el-tree
      v-if="treeData"
      :expand-on-click-node="false"
      highlight-current
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>

JS

  data() {
        return {
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label',
            },
        }
 },

CSS

   /* // 如果不生效试试这个 :deep(.el-tree .el-tree-node__expand-icon.expanded){样式}*/
    /* // 禁止旋转 */
    .el-tree .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    /* //有子节点 且未展开 */
    .el-tree .el-icon-caret-right:before {
        /* //这里是你需要修改的图标路径 */
        background: url('../../assets/images/open.png') no-repeat 0 3px;
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        font-size: 16px;
        background-size: 16px;
    }

    /* //有子节点 且已展开 */
    .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        background: url('../../assets/images/close.png') no-repeat 0 3px;
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        font-size: 16px;
        background-size: 16px;
    }

    /* //没有子节点 */
    .el-tree .el-tree-node__expand-icon.is-leaf::before {
        background: #fff;
        content: '';
        display: block;
        width: 0px;
        height: 0px;
        font-size: 16px;
        background-size: 16px;
    }
    
    /* //高亮字体颜色 */
    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        color: #409eff !important;
    }

=========================================================================

另一种引导线

template模板引入el-tree组件，注意点需要设置:indent=“0”，不然每层树padding-left呈18px的倍数增加

JS没什么区别

CSS样式

/* // el-tree指示线样式  样式不生效试试深度选择 :deep(.tree_container) */
.tree_container {
    .el-tree>.el-tree-node:after {
        border-top: none;
    }
    .el-tree-node {
        position: relative;
        padding-left: 16px;
    }
    //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
    .el-tree-node__expand-icon.is-leaf {
        display: none;
    }
    .el-tree-node__children {
        padding-left: 16px;
    }
    .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 {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }
    .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }
    .el-tree-node:before {
        border-left: 1px solid #e6e6e6;
        bottom: 0px;
        height: 100%;
        top: -22px;
        width: 1px;
    }
    .el-tree-node:after {
        border-top: 1px solid #e6e6e6;
        height: 20px;
        top: 16px;
        width: 24px;
    }
    .el-tree-node__content {
        padding-left: 10px !important;
    }
}