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>
);
};