实现搜索过滤Tree结构数据

327 阅读1分钟

第一步:样式实现,搜索框搜索过滤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
  }
})

}