antdesgin vue 树 或 选择树 异步加载数据 数据来自于后端（vue3.0+ts)

antdesgin vue 树 或 选择树 异步加载数据 数据来自于后端

效果图：

  <a-tree-select
    v-model:value="formState.station"
      show-search
      style="width: 100%"
      :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
      placeholder="请选择岗位"
      allow-clear
      :tree-data="Technical"
      :load-data="onLoadData"
    />

import { getChild }from ‘/@/utils/treeFormat’;

// 通过id比对选中的树节点并给他的children赋值
export function getChild(id,arr,result){ 
  for(let item of arr){
    if(id === item.key){
       item.children = result
    }
     if(item.children){
       getChild(id,item.children,result)
     }
  }
  return arr
}

初始化定义 页面加载时调用

记得return

具体方法

 // 获取岗位
  async function getJobTitle(param,flag){
      let orginData;
      if(flag === 'add'){
       orginData = Technical.value
     } else{
       orginData = [];
     }
     let res = await systemManagementApi.getDictChildData(param);
     if(res.success){
       // 如果是动态加载子级数据(存在3级及以上的数据时)
       if(flag === 'add'){
         // 判断是否已经请求过该节点的数据
         if(res.obj[0].children){
            Technical.value = [...orginData]
         } else {
           Technical.value =  getChild(param,orginData,recursiveTree(res.obj))
         }
       } else{
         // 2级数据时
         Technical.value = [...orginData,...recursiveTree(res.obj)];
       }
     } else{
       message.error(res.msg)
     }
   }
   // 递归树
   function recursiveTree(arr){
     for(let item of arr){
       item.title = item.title;
       item.value = item.id;
       item.key = item.id;
       item.isLeaf = item.isLeaf === '1' ? true:false;
       if(item.children){
         recursiveTree(item.children)
       }
     }
     return arr
   }
    // 懒加载树数据
   const onLoadData = (treeNode: any) => {
     return new Promise((resolve: (value?: unknown) => void) => {
       const { id } = treeNode.dataRef;
       setTimeout(() => {
         getJobTitle(id,'add')
         resolve();
       }, 300);
     });
   };