antd树加loading

您可以使用 antd 的 Tree 组件，并结合 loading 属性来实现树形结构的加载效果。下面是一个示例代码：

import React, { useState } from "react";
import { Tree } from "antd";

const { TreeNode } = Tree;

const MyTree = () => {
  const [loading, setLoading] = useState(false);

  const handleExpand = () => {
    setLoading(true);

    // 模拟异步请求
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  };

  return (
    <Tree loadData={handleExpand} showLine>
      <TreeNode title="Node 1" key="0-0">
        <TreeNode title="Node 1-1" key="0-0-0" />
        <TreeNode title="Node 1-2" key="0-0-1" />
      </TreeNode>
      <TreeNode title="Node 2" key="0-1">
        {loading ? (
          <span>Loading...</span>
        ) : (
          <>
            <TreeNode title="Node 2-1" key="0-1-0" />
            <TreeNode title="Node 2-2" key="0-1-1" />
          </>
        )}
      </TreeNode>
    </Tree>
  );
};

export default MyTree;

在上面的代码中，我们使用了 useState 来管理 loading 状态。当点击展开 Node 2 的时候，会触发 handleExpand 函数，我们可以在该函数中进行异步请求的模拟，设置一定的延迟后，再将 loading 状态设为 false，从而展示出子节点。在展示子节点期间，我们可以显示一个 loading 提示信息。

请注意，上述代码是基于 React 的函数式组件编写的，如果您使用的是类组件，可以稍作修改来适应类组件的语法。