在 Ant Design 的 TreeSelect 组件中实现选中节点显示全路径攻略

在 Ant Design 的 TreeSelect 组件中实现选中节点显示全路径，可通过以下两种主流方案实现：

---

​​方案一：数据预处理（静态路径）​​

​​核心思路​​：在渲染前为每个节点添加完整路径字段，通过 treeNodeLabelProp 指定显示字段。

​​实现步骤​​

1. ​​递归生成路径字段​​
   遍历树数据，为每个节点添加 path 字段（存储从根节点到当前节点的标题拼接字符串）。
2. ​​配置 TreeSelect​​
   通过 treeNodeLabelProp="path" 指定显示路径字段。

import { TreeSelect } from 'antd';

// 数据预处理函数
const formatTreeData = (data) => {
  return data.map(item => {
    const path = item.parent ? `${item.parent.path}/${item.title}` : item.title;
    if (item.children) {
      item.children = formatTreeData(item.children);
    }
    return { ...item, path };
  });
};

const treeData = formatTreeData([
  {
    title: 'Root',
    value: '0',
    children: [{ title: 'Child 1', value: '0-0' }]
  }
]);

const Demo = () => (
  <TreeSelect
    treeData={treeData}
    treeNodeLabelProp="path"  // 关键配置
    showSearch
    style={{ width: 300 }}
  />
);

---

​​方案二：动态计算路径（灵活显示）​​

​​核心思路​​：选中节点时通过递归查找生成路径，适用于动态数据或需要实时计算的场景。

​​实现步骤​​

1. ​​递归查找路径​​
   在 onChange 事件中，根据选中节点的 value 递归遍历树数据，收集父节点标题。
2. ​​更新显示值​​
   将生成的路径字符串作为 value 或通过状态管理显示。

import { TreeSelect, useState } from 'antd';

const findPath = (tree, targetValue, path = []) => {
  for (const node of tree) {
    const newPath = [...path, node.title];
    if (node.value === targetValue) return newPath.join(' / ');
    if (node.children) {
      const result = findPath(node.children, targetValue, newPath);
      if (result) return result;
    }
  }
  return targetValue; // 未找到时返回原始值
};

const Demo = () => {
  const [displayValue, setDisplayValue] = useState('');
  const treeData = [/* ... */];

  const handleChange = (value) => {
    const path = findPath(treeData, value);
    setDisplayValue(path);
  };

  return (
    <TreeSelect
      treeData={treeData}
      value={displayValue}
      onChange={handleChange}
      showSearch
      style={{ width: 300 }}
      treeCheckable
      showCheckedStrategy={TreeSelect.SHOW_PARENT} // 多选时显示父节点
    />
  );
};

---

​​关键配置说明​​

属性	作用	适用场景
treeNodeLabelProp	指定节点渲染时使用的字段（需配合预处理路径字段）	静态路径显示
showCheckedStrategy	控制多选时回填策略（SHOW_PARENT 显示父节点）	多选场景
dropdownStyle	设置下拉框样式（如最大高度）	优化交互体验

​​注意事项​​

1. ​​性能优化​​

   • 数据预处理时避免深层递归，大数据量建议分页加载
   • 动态路径计算可添加防抖函数减少频繁触发

2. ​​数据结构要求​​

   • 节点需包含唯一 value 和层级关联的 children 字段
   • 推荐使用 key 代替 value 作为唯一标识（v5+ 版本）

通过上述方案，可灵活实现 TreeSelect 的全路径显示需求。静态方案适合固定层级数据，动态方案更适合复杂树形结构或需要实时计算的场景。