springboot+vue树形懒加载开发

1. 实现逻辑（入参也可是id根据实际情况而定）

 public List<Entity> selectTreeListById(Entity entity) {
        List<Entity > list = mapper.selectEntityByParentId(entity);
        list.forEach(e-> {
            boolean isChild = this.isChildren(e);
            entity.setHasChildren(isChild);
        });
        return list;
    }

    private boolean isChildren(Entity entity){
        boolean flag = false;
        List<Entity> list = mapper.selectEntityByParentId(entity);
        if (aiasSourceTypeList.size()>0){
            flag = true;
        }
        return flag;
    }

2. 实体代码（其他实体根据实际情况而定，记得写set/get方法）

/**
*主键
**/
private String id;
/**
*名称
**/
private String name;
/**
*父类id
**/
private String parentId;
/**
*是否有子集
**/
private boolean hasChildren;

1. api.js调用后端接口（参数根据实际情况而定）

// 树形表懒加载接口
export function treeList(query) {
  return request({
    url: '/source/type/treeList',
    method: 'get',
    params:query
  })
}

2. 前端主要代码

<template>
  <el-row :gutter="20">
    <!--树数据-->
    <el-col :span="4" :xs="24">
      <div class="head-container">
        <el-input
          v-model="typeName"
          placeholder="请输入树节点名称"
          clearable
          size="small"
          prefix-icon="el-icon-search"
          style="margin-bottom: 20px"
        />
      </div>
      <div class="head-container">
        <el-tree
          :load="loadNode"
          :props="defaultProps"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          lazy
          @node-click="handleNodeClick"
        />
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {
  treeList
} from '@/api/source/type'
import {mapState} from "vuex";


export default {
  data() {
    return {
      // 类型名称
      typeName: '',
      // 数据中的属性
      typeData:{
        type:'1',
        id: '1',
      },
      defaultProps: {
        children: 'children',
        label: 'name',
        hasChildren:'hasChildren'
      },
    }
  },
  watch: {
    // 根据名称筛选树节点 - 前端筛选
    typeName(val) {
      this.$refs.tree.filter(val)
    }
  },

  methods: {
    /** 查询列表 */
    loadNode(node, resolve){
      console.log(node);
      if (node.level === 0){
        treeList(this.typeData).then(res => {
          resolve(res.data)
        })
      }else {
        debugger
        this.typeData.id=node.data.id
        treeList(this.typeData).then(res => {
          resolve(res.data)
        })
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 树节点单击事件
    handleNodeClick(data) {
      console.log('被点击的树节点', data)
      this.queryParams.parentId = data.id
      this.getList()
    }
  }
}
</script>

Element官网链接