Antd的TreeTransfer按照父级筛选数据

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_43606158/article/details/100924273

我们看antd的官方示例demo中有普通的transfer按照条件筛选数据，可是并没有提供TreeTransfer的demo示例。

普通的筛选数据的demo：

那么我们就只好看看他这个组件的API。

发现了这俩个东西是我们要的，
showSearch用来展示搜索框，
onSearch用来改变我们的数据。

比较简单的一个实现思路就是在你的onSearch里面去筛选你的dataSource数据：

// 只写了本功能相关的关键代码，其他代码请自行处理，【可以到antd里面弄固定的假数据测试】
<TreeTransfer
  dataSource={this.state.departmentList || []}
  showSearch
  onSearch={(dir, val) => {
  	 // primitiveDept里的数据是departmentList的全部数据，我们根据它的全部数据加上我们的筛选条件去处理departmentList。
  	 const { primitiveDept } = this.state;
  	 // 笔者只是过滤左边的数据，请根据你自身实际需求改下方代码
     if (dir === 'left') {
       const newDeptList = primitiveDept.filter(item => item.name.indexOf(val) > -1);
       this.setState({ departmentList: newDeptList });
     }
  }}
/>

实现效果：

还有什么问题下方评论即可。