第一步:样式实现,搜索框搜索过滤treeSelect下拉框。
const [value, setValue] = useState('');
const [dataSource, setDataSource] = useState([{ label: "蔡大人", value: 2, children: [{ label: "蔡蔡", value: 23, children: [{ label: "蔡妈", value: 234, children: [] }] }] },{ label: "蔡晓飞", value: 1, children: [{ label: "蔡夫人", value: 123, children: [{ label: "蔡董事", value: 1234, children: [] }] }] }]);
<Input style={{width: "250px"}} onChange={(e)=>{ setValue(e.target.value) }}/>搜索 <TreeSelect style={{width: "500px"}} treeData={dataSource}>
第二步:功能实现;
const data = [{ label: "蔡晓栋", value: 2, children: [{ label: "蔡蔡", value: 23, children: [{ label: "蔡妈", value: 234, children: [] }] }] },{ label: "蔡晓飞", value: 1, children: [{ label: "蔡飞", value: 123, children: [{ label: "蔡爸", value: 1234, children: [] }] }] }];
const countData = ()=>{
let list = [...JSON.parse(JSON.stringify(data))];
// 克隆tree结构
console.log("list",list);
const setVisible = (list)=>{
list.forEach((item)=>{
if(item.label.includes(value)){
item.visible = true
}
if(item?.children?.length){
setVisible(item.children)
}
if(!item.visible && item?.children?.length){
//如果子集匹配搜索条件,父集也显示true
item.visible = item.children.some((child)=> child.visible)
}
})
}
setVisible(list);
let newData = filterVisible(list);
setDataSource([...newData]);
}
const filterVisible = (list)=>{
return list.filter((item)=>{
if(item?.children?.length){
item.children = filterVisible(item.children);
}
if(item.visible){
//匹配的子集和父集都显示出来,
return true
}
})
}