Springboot + Vuetreeselect 实现下拉树懒加载

项目需要，可选择的下拉树，由于数据可能过多的原因，为了避免不必要的浪费，所以呢，用到了懒加载的模式。

一、前段vue代码

1.下载依赖

npm install --save @riophae/vue-treeselect

2.引用进来

import Treeselect from '@riophae/vue-treeselect'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

3.html

<Treeselect
            v-model="orgCode"     //双向绑定的值
          :options="options"       //初始化根节点数据
          :multiple="true"             //是否需要多选框
          :load-options="loadOptions"   //单击父节点，加载子节点数据
          placeholder="选择上级模型"
          />

4.js

<script>
import Treeselect from '@riophae/vue-treeselect'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: {Treeselect},
data() {
  return {
  //Treeselect绑定的下拉框选中的值，必须设置为null,不然会出现unknown的bug
    orgCode:null, 
     
    //这里必须放"id"和label, id是唯一的值（我这边后台返回的是orgCode）
    //label是要显示的名称,（后台返回的数据是organizationName）
    options:[],   
  };
},
 
created() {
  this.getTree()
},
 
methods: {
  getTree() {
    // 初始化下拉框数据 只加载根节点
    let params = {'exportType': this.exportType,
      'parentCode' : 0};
    systemManage.getOrganizationTreeList(params).then(res =>{
      let data = res.data;
      for (var i = 0; i < data.length; i++) {
        var parentInfo = {}
        parentInfo.id = data[i].orgCode           
        parentInfo.label = data[i].organizationName
        parentInfo.parentId = data[i].parentCode
        // 主要就是为了添加 children = null
        parentInfo.children = null
        this.options.push(parentInfo)
      }
    })
  },
​
  // 加载子节点数据
  loadOptions({ action, parentNode, callback }) {
      console.log('parentNode',parentNode)
    if (action === LOAD_CHILDREN_OPTIONS) {
      // 加载点击节点的 子节点
      let params = {'exportType': this.exportType,
        'parentCode' : parentNode.id};
      systemManage.getOrganizationTreeList(params).then(response =>{
        var arr = []
        let data = response.data;
        if (data.length > 0) {
          for (var i = 0; i < data.length; i++) {
            const chiledModeInfo = {}
            chiledModeInfo.id = data[i].orgCode
            chiledModeInfo.label = data[i].organizationName
            chiledModeInfo.parentCode = data[i].parentCode
            // 主要就是为了添加 children = null
            chiledModeInfo.children = null
            arr.push(chiledModeInfo)
          }
        }
        parentNode.children = arr
      })
      callback()
    }
  },
 
}
};  
</script>

二、后段代码

1、Controller层

/**
  * 获取机构树形结构
  **/
  @PostMapping("/getOrganizationTreeList")
  @ResponseBody
  public Result getOrganizationTreeList(@RequestBody DimensionEntity dimensionEntity) {
      List<OrganizationBase> organizationBases = organizationBaseService.listWithTree(dimensionEntity.getParentCode());
      return ok(organizationBases);
}

2、service

public interface OrganizationBaseService extends IService<OrganizationBase> {
​
  List<OrganizationBase> listWithTree(String parendCode);
​
}

3、serviceImpl

@Component
public class OrganizationBaseServiceImpl extends ServiceImpl<OrganizationBaseMapper, OrganizationBase> implementsOrganizationBaseService {
​
  @Resource
  private OrganizationBaseMapper organizationBaseMapper;
​
  @Override
  public List<OrganizationBase> listWithTree(String parentCode) {
​
      List<OrganizationBase> organizationBases = organizationBaseMapper.getList(parentCode);
//       List<OrganizationBase> organizationBases = baseMapper.selectList(null);
      return organizationBases.stream()
              //查找到所有传过来的一级菜单
            .filter(org -> org.getParentCode().equals(parentCode))
            .map(org ->{
              org.setChildren(getChildren(org,organizationBases));
              return org;
            }).collect(Collectors.toList());
​
}
  /**
  * 递归获取子菜单
  *
  */
  public List<OrganizationBase> getChildren(OrganizationBase o,List<OrganizationBase> all){
      List<OrganizationBase> children = all.stream()
            .filter(org -> org.getParentCode().equals(o.getOrgCode()) )
            .map((org) ->{
                  org.setChildren(getChildren(org,all));
                  return org;
            }).collect(Collectors.toList());
      return children;
}
}

4、mapper

@Component
public interface OrganizationBaseMapper extends BaseMapper<OrganizationBase> {
​
  @Select({"select * from system_organization_base where parent_code =#{parentCode}"})
  List<OrganizationBase> getList(@Param("parentCode") String parentCode);
}