el-tree

<template>
    <el-card>
        <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> -->
        
        <!-- <el-tree 
            ref="tree"
            :data="treeData" 
            :props="defaultProps" 
            default-expand-all
            :filter-node-method="filterNode"
            @node-click="handleNodeClick">
        </el-tree> -->
        <el-tree
	class="tree-line"
	icon-class="el-icon-circle-plus-outline"
	:indent="0"
	:data="treeData"
></el-tree>
        
    </el-card>
</template>
<script>
export default {
    data() {
        return {
            filterText: '',
             treeData: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }

        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    mounted() {
        this.flatHeierarchy()
    },
    methods: {
        flatHeierarchy() {
            this.$http.myPostJson(this.$api.flatHierarachyload,{}).then(res => {
                if(res.code == 200) {
                    this.treeData = res.data
                }
            })
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        }
    },
}
</script>
// 以下为scss，记得去掉scoped，或者使用/deep/
<style lang="scss">
.tree-line{
  .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }
  .el-tree-node__children {
    padding-left: 16px; // 缩进量
  }

  // 竖线
  .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #52627C;
  }
  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  // 横线
  .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #52627C;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }
	
  // 展开关闭的icon
  .el-tree-node__expand-icon{
    font-size: 16px;
    // 叶子节点（无子节点）
    &.is-leaf{
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}
</style>