element tree组件连接线以及懒加载

      <el-tree highlight-current :indent="0"  default-expand-all :data="treelist" class="tree-line" ref="tree" node-key="id"  
      :props="defaultProps"  @node-click="nodeClick"  :expand-on-click-node="false"  lazy :load="loadNode">
      
      <span class="custom-tree-node" slot-scope="{data}">
      
        <span>
          <i class="el-icon-folder">i>
        span>
        <span v-if="!data.id">
          <i class="el-icon-document">i>
        span>
        <span>
          {{ data.fvAreaName }}
        span>
      span>
    el-tree>

default-expand-all为节点数默认全部展开，懒加载适用

<script>
import bus from '@/utils/eventBus.js'
import { TableAPI} from '@/api/valuation/my_valuation.js'
  export default {
    props: {
      treelist: Array,
      ShowSave: Boolean,
      taskInfo : Object
    },
    data() {
      return {
       treelist:[],
      };
    },
    computed: {
    },
    created() {
    },
    mounted() {
    },
    computed: {
    },
    watch: {
    },
    methods: {
      
      // 该节点为真实选中的节点，不包含半勾选的上级节点
      nodeClick(data) {
        console.log(data,'节点点击');
      },
      
     // 刷新列表
     getTable() {
      // 初始化列表...
      TableAPI(this.params).then(el=>{
      
        })
     },
     // 获取选择的节点数组
      handleCheckChange(click, checked,index){
        // this.$refs.tree.setCheckedKeys([click.id]); // 只允许选择一个节点
        console.log('选择的节点',click,checked,index);
      },
      // 懒加载层级
      loadNode(node, resolve) {
        const id = node.data.id
        // 通过node.level的层级判断点击的是第几层
        if (node.level === 1) {
            CityAPI({id : this.taskInfo.taskId, provinceId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: false  // 通过leaf判断是否有下一层级
                }))
                resolve(childNodes)
            })
        } else if (node.level === 2) {
            DistrictAPI({id : this.taskInfo.taskId, cityId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: false  // 通过leaf判断是否有下一层级
                }))
                resolve(childNodes)  // 返回最新节点数据
            })
        } else if (node.level === 3) {
            SubdistrictAPI({id : this.taskInfo.taskId, districtId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: false  // 通过leaf判断是否有下一层级
                }))
                resolve(childNodes)   // 返回最新节点数据
            })
        } else if (node.level === 4) {
            CommunityAPI({id : this.taskInfo.taskId, subdistrictId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: false
                }))
                resolve(childNodes)  // 返回最新节点数据
            })
        } else if (node.level === 5) {
            CompoundAPI({id : this.taskInfo.taskId, communitytId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: true  // 通过leaf判断是否有下一层级
                }))
                resolve(childNodes)  // 返回最新节点数据
            })
        } 
      }
    }
  };

</script>

利用css配置tree节点虚线

设置tree节点的连接线需要在tree组件上配置 :index = 0 ; 初始化节点的距离，否则节点的连接线位置会偏移，配置完成后使用上面的css样式即可，before伪元素为Y轴、after伪元素为X轴连接线。