【antdesign】树控件 的 搜索功能

根据关键字搜索出树控件中的数据，

1.树控件的数据另存一份不带层级 ‘allData’，用于搜索，

2.搜索不带层级的那份数据 'allData' ，筛选出他的key或者id，赋值给树控件的展开节点

3.关键字标红则是直接在树控件中控制

创建树控件 - 关键字标红就是在template中直接进行设置；

<template>
<Tree
    :tree-data="treeData"
    v-model:expandedKeys="expandedKeys" // 展开的节点
    :auto-expand-parent="autoExpandParent" // 是否自动展开节点 
    block-node 
    @expand="onExpand"
  >
    <template #title="{ title }">
        <span v-if="title.indexOf(searchValue) > -1">
          {{ title.substr(0, title.indexOf(searchValue)) }}
          <span style="color: #f50">{{ searchValue }}</span>
          {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
        </span>
        <span v-else>{{ title }}</span>
      </template>
  </Tree>
</template>

搜索数据

// 将自动展示改为false
  const onExpand = (keys: string[]) => {
    expandedKeys.value = keys;
    autoExpandParent.value = false;
  };

// input 的事件，进行搜索
const queryTreeList = (value) => {
    expandedKeys.value = allDataList
      .map((item: any) => {
        if (item.title.indexOf(value) > -1) {
          return getParentKey(item.key, treeData.value); // 进行筛选，将key返回给展开的节点
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);

    autoExpandParent.value = true; // 是否自动展开
  };
  const getParentKey = (key: string | number, tree: any): string | number | undefined => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.children) {
        if (node.children.some((item) => item.key === key)) {
          parentKey = node.key;
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };