tree select组件搜索问题。
import React from 'react';
import {TreeSelect} from 'antd';
const treeData = [{
label: 'Node1',
value: '0-0',
key: '0-0',
children: [{
label: 'Child Node1',
value: '0-0-1',
key: '0-0-1',
}, {
label: 'Child Node2',
value: '0-0-2',
key: '0-0-2',
}],
}, {
label: 'Node2',
value: '0-1',
key: '0-1',
children: [{
label: '大家好',
value: '0-0-1',
key: '0-0-1',
}, {
label: '人生就是',
value: '0-0-2',
key: '0-0-2',
}],
}];
class DataSelectTree extends React.Component {
state = {
value: undefined,
}
onChange = (value) => {
console.log(arguments, value);
this.setState({value});
}
render() {
return (
<TreeSelect
showSearch
treeCheckable
style={{width: 300}}
value={this.state.value}
dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
treeData={treeData}
placeholder="json"
treeDefaultExpandAll
onChange={this.onChange}
/>
);
}
}
export default DataSelectTree;
搜索只对个别关键字生效,比如输入2,但是过滤的结果也不对。求解怎么配置tree-select才能使其生效、
你这问题有点久了,今天用到这块儿了,也发现了问题,后来通过看api解决。
要使用antdesign TreeSelect的搜索功能,至少要知道三个属性,showSearch、filterTreeNode、treeNodeFilterProp。
showSearch:是否启用搜索
treeNodeFilterProp:启用搜索后,输入项过滤对应的 treeNode 属性(比如value、title、key)
filterTreeNode:是否根据输入项进行筛选,默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值。
你的问题应该在treeNodeFilterProp这个属性没设置title,这块儿antdesign默认是value。
把你的label换成title