版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
我们看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 });
}
}}
/>
实现效果:
还有什么问题下方评论即可。