目录列表搜索功能

 

搜索到相应的目录展开并选中，搜索栏为空则清空目录置为原始状态

1.修改原有的树标签

<a-directory-tree
          v-model:expandedKeys="expandedKeys"
          v-model:selectedKeys="selectedKeys"
          multiple
          :tree-data="treeData"
          style="background-color: #e5e5e5"
          @rightClick="onRightClick"
          @select="handleDirectoryClick"
          :auto-expand-parent="autoExpandParent"
        >
        </a-directory-tree>

其中@select="handleDirectoryClick"是根据目录信息动态获取表格中的对应数据，可自行添加 

2.添加搜索逻辑

// 在函数外部声明 enumOptions
const enumOptions = ref([]);

// 处理搜索事件
const autoExpandParent = ref<boolean>(true);
watch(searchValue, async value => {
  try {
    // 调用接口搜索目录数据
    const response = await selectDirectoryByName({ name: value.trim() });
    // 假设搜索接口返回的是一个数组，表示搜索结果
    const directories = response.data.data;
    if (directories && directories.length > 0) {
      // 将搜索结果转换为树形结构
      const treeData = transformToTreeData(directories);
      const selected = [];
      treeData.forEach((item: any) => selected.push(item.key))
      // 获取需要展开的节点的 keys 和需要选中的节点的 keys
      const expanded = getKeysForSearchResult(treeData);
      // 更新展开和选中的节点
      expandedKeys.value = expanded;
      selectedKeys.value = selected;
      searchValue.value = value;
      autoExpandParent.value = true;
      enumOptions.value = treeData;
    } else {
      // 如果未搜索到目录，则清空展开和选中的节点
      expandedKeys.value = [];
      selectedKeys.value = [];
      // 清空树形目录数据
      enumOptions.value = [];
    }
  } catch (error) {
    console.error('搜索目录失败:', error);
  }
  
});

// 将搜索结果转换为树形结构
const transformToTreeData = (directories) => {
  return directories.map((dir) => ({
    title: dir.directoryName,
    key: String(dir.id),
    children: dir.children ? 
    (dir.children) : []
  }));
};

// 获取需要展开和选中的节点的 keys
const getKeysForSearchResult = (treeData) => {
  const expanded = [];
  
  // 递归函数，用于从当前节点向上查找并添加展开和选中的节点 keys
  const findAndAddKeys = (node) => {
    if (node) {
      expanded.push(node.key);
      // 如果当前节点有父节点，继续向上查找并添加展开和选中的节点 keys
      if (node.parent) {
        findAndAddKeys(node.parent);
      }
    }
  };
  // 遍历树形结构，查找搜索结果的节点并添加展开和选中的节点 keys
  treeData.forEach((node) => {
    findAndAddKeys(node)
  });

  return expanded;
};

 可查阅antdv官网查阅更多详情 Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js