异步加载树形组件（antd-vue）

1、html

 <a-directory-tree
          :tree-data="useDataSourceTreeList"
          v-model:selectedKeys="selectedKey"
          v-if="datasourceId"
          blockNode
          class="tree-card"
          :showIcon="false"
          @select="dirSelect2"
          checkStrictly
          style="margin-top: 10px"
          :load-data="onLoadData"
>
</a-directory-tree>

2、onLoadData异步函数

const onLoadData = (treeNode) => {
  if (treeNode?.dataRef?.fileType == 'file') {
	return;
  }
  if (treeNode?.dataRef?.fileType !== 'file') {
	getFtpDatasourceFileBySourceId({
	  datasourceId: datasourceId.value || '',
	  filePath: treeNode?.dataRef.filePath
	}).then((res) => {
	  const { data = [] } = res || {};
	  if (res && data?.[0]?.children?.length) {
		treeNode.dataRef.children = data?.[0]?.children;
		const list = addLevelToTree(useDataSourceTreeList.value);
		const arr = uniqueArray(list, 'fileName');
		useDataSourceTreeList.value = [...arr];
		useDataSourceTreeList2.value = [...arr];
	  }
	});
  }
};

3、其他工具函数

/**
 * 增加树形层级level属性
 * @param tree
 * @param level
 * @returns
 */
export const addLevelToTree = (tree: any, level = 0, callBack = (item) => {}) => {
  tree?.forEach((node: any) => {
	node.level = level;
	node.value = node?.id;
	node.key = node?.id;
	callBack(node);
	if (node?.children && node?.children?.length > 0) {
	  addLevelToTree(node.children, level + 1);
	}
  });
  return tree;
};

// 去重
export const uniqueArray = (arr = [], key: any) => {
  const keyValues = new Set();
  let val;
  return arr.filter((obj) => {
	val = obj[key];
	if (keyValues.has(val)) {
	  return false;
	}
	keyValues.add(val);
	return true;
  });
};