React-tree-

import { useState } from 'react'
import  {  theme, Transfer, Tree  } from 'antd'
import './App.css'

// 定义递归方法，接收一个数组
function deepFilter(list,value) {
  // 使用filter 过滤当前层的数组
  return list.filter(item => {
      if(item.children){
         item.children = deepFilter(item.children,value)  
      }
      return item.title.includes(value)
  })
}
// https://blog.csdn.net/weixin_44058725/article/details/120209330
const arrayTreeFilter = (data, predicate, filterText) => {
  const nodes = data;
  // 如果已经没有节点了，结束递归
  if (!(nodes && nodes.length)) {
      return;
  }
  const newChildren = [];
  for (const node of nodes) {
      if (predicate(node, filterText)) {
          // 如果自己（节点）符合条件，直接加入到新的节点集
          newChildren.push(node);
          // 并接着处理其 children,（因为父节点符合，子节点一定要在，所以这一步就不递归了）
          node.children = arrayTreeFilter(node.children, predicate, filterText);
      } else {
          // 如果自己不符合条件，需要根据子集来判断它是否将其加入新节点集
          // 根据递归调用 arrayTreeFilter() 的返回值来判断
          const subs = arrayTreeFilter(node.children, predicate, filterText);
          // 以下两个条件任何一个成立，当前节点都应该加入到新子节点集中
          // 1. 子孙节点中存在符合条件的，即 subs 数组中有值
          // 2. 自己本身符合条件
          if ((subs && subs.length) || predicate(node, filterText)) {
              node.children = subs;
              newChildren.push(node);
          }
      }
  }
  return newChildren;
}

const filterFn = (data, filterText) => { //过滤函数
  if (!filterText) {
      return true;
  }
  return (
      new RegExp(filterText, "i").test(data.title) //我是一title过滤 ，你可以根据自己需求改动
  );
}

let all;
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 TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {
  const { token } = theme.useToken();
  console.log('all 获取到值',all)
  if(!all){
     all =  JSON.parse(JSON.stringify(dataSource)) // 深拷贝
    console.log('all 获取到值1')
  }else{
    console.log('all 有值')
  }
  const dataSourceData = dataSource
  const transferDataSource = [];
  
  function flatten(list = []) {
    list.forEach((item) => {
      transferDataSource.push(item);
      flatten(item.children);
    });
  }
  flatten(dataSource);
  return (
    <Transfer
      showSearch
      onSearch ={(direction,value)=>{ // dataSource
        console.log(direction,value,dataSourceData,all)
       // 变更数据
       if(value){
        var tmp =  JSON.parse(JSON.stringify(all)) // 深拷贝
        //dataSource = deepFilter(tmp,value) 
        dataSource = arrayTreeFilter(tmp, filterFn, value);

        console.log('处理后的数据',dataSource)
      }else{ // 实际上需要过滤已经到右边去的数据
        
       dataSource = all  // 
      }
     // 变更数据end
      }} 

      {...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 (
            <div
              style={{
                padding: token.paddingXS,
              }}
            >
              <Tree
                blockNode
                checkable
                checkStrictly={false}
                defaultExpandAll
                checkedKeys={checkedKeys}
                treeData={generateTree(dataSource, targetKeys)}
                onCheck={(_, { node: { key } }) => {
                  console.log('打勾',key)
                  onItemSelect(key, !isChecked(checkedKeys, key));
                }}
                onSelect={(_, { node: { key } }) => {
                   console.log('选中',key)
                  onItemSelect(key, !isChecked(checkedKeys, key));
                }}
              />
            </div>
          );
        }
      }}
    </Transfer>
  );
};
const treeData = [
  {
    key: '0-0',
    title: '0-0',
  },
  {
    key: '0-1',
    title: '0-1',
    children: [
      {
        key: '0-1-0',
        title: '0-1-0',
      },
      {
        key: '0-1-1',
        title: '0-1-1',
      },
    ],
  },
  {
    key: '0-2',
    title: '0-2',
    children: [
      {
        key: '0-2-0',
        title: '0-2-0',
      },
      {
        key: '0-2-1',
        title: '0-2-1',
      },
    ],
  },
  {
    key: '0-3',
    title: '0-3',
  },
  {
    key: '0-4',
    title: '0-4',
  },
];
const App = () => {
  const [targetKeys, setTargetKeys] = useState([]);
  const onChange = (keys) => {
    setTargetKeys(keys);
  };
  return <TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={onChange} />;
};

export default App