Antd的TreeTransfer按照父级筛选数据

我们看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 });
     }
  }}
/>

实现效果:

在这里插入图片描述
还有什么问题下方评论即可。

评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值