Antd的Transfer穿梭框Tree树穿梭框搜索筛选数据

antd的官方示例demo中有普通的transfer按照条件筛选数据，只需要添加API参数：showSearch，但是在Tree树穿梭框中会失效，并不能筛选出，而官方实例也没有给出解决示例，这里给出一个解决方法

查看API:

发现onSearch 搜索框内容时改变时的回调函数利用该参数
一个实现思路就是在你的onSearch里面去筛选你的dataSource数据：

另外官方给的树形穿梭框示例会导致滚动条不可使用，这里需要单独设置：
树结构：

另一边：

根据官方组件结合自己的数据业务场景修改，附上我的代码，供参考：

const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {

  const transferDataSource = [];
  const dataSourceData=dataSource
  function flatten(list = []) {
    list.forEach(item => {
      transferDataSource.push(item);
      flatten(item.children);
    });
    
  }
  flatten(dataSource);
  return (
    
    <Transfer
    
      {...restProps}
      targetKeys={targetKeys}
      dataSource={transferDataSource}
      className="tree-transfer"
      showSearch
      listStyle={{
        width: 300,
        height: 300,
      }}
      showSelectAll={true}
      render={item => item.userNickname}
      rowKey={record => record.id}
      
      onSearch={(dir, val) => {
        
       if (dir === 'left') {
        const newDeptList = dataSourceData.filter(item => (
          item.children.filter(e=>(
            e.userNickname.indexOf(val) > -1 
          )).length>0||val.length==0
        )).map(item => {
          item = Object.assign({}, item)
          if (item.children) {
            item.children =item.children.filter(res => (res.userNickname.indexOf(val) > -1 ))
          }
          return item
        })
        dataSource=newDeptList    
     }  
  }}
    >
      {({ direction, onItemSelect,onItemSelectAll,onSelectAll, selectedKeys }) => {
        if (direction === 'left') {
          const checkedKeys = [...selectedKeys, ...targetKeys];
          return (
            <Tree
             height={200}
              blockNode
              checkable
              checkStrictly
              defaultExpandAll
              checkedKeys={checkedKeys}
              disableCheckbox={true}
              treeData={generateTree(dataSource, targetKeys)}
              onCheck={(_, { node: { key } }) => {
                onItemSelect(key, !isChecked(checkedKeys, key));
              }}
              onSelect={(_, { node: { key } }) => {
                console.log(checkedKeys);
                console.log(key);
                onItemSelect(key, !isChecked(checkedKeys, key));
              }}
            />
          );
        }
      }}
    </Transfer>
  );
};