react ant design树穿梭框实现搜索并展开到子节点、同级节点选择及同时选择数量限制功能

功能点：

点击节点前的箭头，可以手动展开或折叠该节点的子节点。
在搜索框中输入关键词，匹配的节点及其父节点会自动展开。
清空搜索框后，恢复到用户手动控制的展开状态。
勾选节点时仍然遵守 "最多勾选 6 个节点" 和 "只能选择同级节点" 的限制。

import { Transfer, Tree, Input, message } from 'antd';
import React, { useState } from 'react';// 判断是否已选中
const isChecked = (selectedKeys, eventKey) => selectedKeys.includes(eventKey);// 生成树结构，并标记禁用状态
const generateTree = (treeNodes = [], checkedKeys = []) =>treeNodes.map(({ children, ...props }) => ({...props,disabled: checkedKeys.includes(props.key),children: generateTree(children, checkedKeys),}));// 搜索功能：过滤树节点并展开到匹配节点
const filterTreeData = (treeData, searchValue) => {const loop = (data) =>data.map((item) => {const match = item.title.toLowerCase().includes(searchValue.toLowerCase());const children = item.children ? loop(item.children) : [];return {...item,children,isMatch: match || children.some((child) => child.isMatch),};}).filter((item) => item.isMatch);return loop(treeData);
};// 自定义 TreeTransfer 组件
const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {const transferDataSource = [];const [searchValue, setSearchValue] = useState('');const [expandedKeys, setExpandedKeys] = useState([]); // 控制展开的节点// 展平树结构为一维数组function flatten(list = []) {list.forEach((item) => {transferDataSource.push(item);flatten(item.children);});}flatten(dataSource);// 动态计算需要展开的节点（用于搜索）const calculateExpandedKeys = (treeData) => {const keys = [];const loop = (data) =>data.forEach((item) => {if (item.isMatch) {keys.push(item.key);if (item.children) loop(item.children);}});loop(treeData);return keys;};// 过滤后的树数据const filteredTreeData = filterTreeData(dataSource, searchValue);const autoExpandedKeys = calculateExpandedKeys(filteredTreeData);// 更新展开状态const handleExpand = (newExpandedKeys) => {setExpandedKeys(newExpandedKeys);};return (<Transfer{...restProps}targetKeys={targetKeys}dataSource={transferDataSource}className="tree-transfer"render={(item) => item.title}showSelectAll={false}>{({ direction, onItemSelect, selectedKeys }) => {if (direction === 'left') {const checkedKeys = [...selectedKeys, ...targetKeys];return (<>{/* 搜索框 */}<Inputplaceholder="搜索节点"value={searchValue}onChange={(e) => {setSearchValue(e.target.value);setExpandedKeys(autoExpandedKeys); // 搜索时自动展开匹配节点}}style={{ marginBottom: 16 }}/><TreeblockNodecheckablecheckStrictlydefaultExpandAllcheckedKeys={checkedKeys}treeData={filteredTreeData}expandedKeys={searchValue ? autoExpandedKeys : expandedKeys} // 根据搜索状态决定展开哪些节点onExpand={handleExpand} // 手动控制展开/折叠onCheck={(_, { node }) => {const { key, parentKey } = node;// 检查是否在同一层级const isSameLevel = checkedKeys.every((k) => {const checkedNode = transferDataSource.find((item) => item.key === k);return !checkedNode || checkedNode.parentKey === parentKey;});// 检查是否超过最大勾选数量限制const isWithinLimit = checkedKeys.length < 6 || checkedKeys.includes(key);if (isSameLevel && isWithinLimit) {onItemSelect(key, !isChecked(checkedKeys, key));} else {message.warn(!isSameLevel? '只能选择同级节点': '最多只能同时勾选 6 个节点');}}}onSelect={(_, { node }) => {const { key, parentKey } = node;// 检查是否在同一层级const isSameLevel = checkedKeys.every((k) => {const checkedNode = transferDataSource.find((item) => item.key === k);return !checkedNode || checkedNode.parentKey === parentKey;});// 检查是否超过最大勾选数量限制const isWithinLimit = checkedKeys.length < 6 || checkedKeys.includes(key);if (isSameLevel && isWithinLimit) {onItemSelect(key, !isChecked(checkedKeys, key));} else {message.warn(!isSameLevel? '只能选择同级节点': '最多只能同时勾选 6 个节点');}}}/></>);}}}</Transfer>);
};// 测试数据
const treeData = [{key: '0-0',title: 'Node 0-0',parentKey: null, // 根节点没有父节点},{key: '0-1',title: 'Node 0-1',parentKey: null,children: [{key: '0-1-0',title: 'Node 0-1-0',parentKey: '0-1', // 父节点是 '0-1'},{key: '0-1-1',title: 'Node 0-1-1',parentKey: '0-1', // 父节点是 '0-1'},],},{key: '0-2',title: 'Node 0-3',parentKey: null,},
];// 主应用组件
const App = () => {const [targetKeys, setTargetKeys] = useState([]);const onChange = (keys) => {setTargetKeys(keys);};return <TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={onChange} />;
};export default App;