element Tree扩展（更换图标，添加指引线）

效果图，如下图所示，如需更换图标，替换图标即可

<template>
  <el-tree
    :data="data"
    default-expand-all
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
                {
                  label: "三级 3-2-2",
                  children: [
                    {
                      label: "三级 3-2-2-1",
                    },
                    {
                      label: "三级 3-2-2-2",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>

<style lang="less" scoped>
.el-tree ::v-deep {
  .el-tree-node__content {
    position: relative;
  }
  //竖线
  .el-tree-node:last-child > .el-tree-node__content::before {
    content: "";
    width: 1px;
    height: 10000px;
    border-width: 1px;
    border-left: 1px solid #52627c;
    position: absolute;
    margin-left: -9px;
    bottom: 13px;
  }
  //横线
  .el-tree-node__children .el-tree-node__content::after {
    content: "";
    width: 13px;
    height: 1px;
    border-width: 1px;
    border-top: 1px solid #52627c;
    position: absolute;
    margin-left: -9px;
  }
  .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 6px 3px;
  }
  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  //有子节点 且未展开
  .el-icon-caret-right:before {
    background: url("../../../../../public/imgs/add.png") no-repeat 0;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
  //有子节点 且已展开
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url("../../../../../public/imgs/del.png") no-repeat 0;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
  //没有子节点
  .el-tree-node__expand-icon.is-leaf::before {
    background: url("../../../../../public/imgs/del.png") no-repeat 0;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
}
</style>

图中图标：下图