antd TreeSelect模糊搜索

### 关于Ant Design TreeSelect组件实现模糊搜索 为了实现在 Ant Design Vue 的 `TreeSelect` 组件中进行模糊搜索的功能，可以考虑通过自定义过滤逻辑来达到目的。具体来说，在默认情况下，`TreeSelect` 提供了基本的搜索功能，但是当需求涉及到更复杂的场景比如多条件匹配或是仅显示符合条件的结果时，则需进一步定制。 #### 自定义搜索函数 可以通过设置 `treeNodeFilterProp` 属性指定用于过滤的关键字属性名称，并利用 `filterTreeNode` 函数来自定义搜索行为[^1]： ```javascript const filterTreeNode = (inputValue, treeNode) => { if (!inputValue || typeof inputValue !== 'string') return true; const lowerCaseInput = inputValue.toLowerCase(); let result = false; function checkInChildren(children){ if(!children || !Array.isArray(children)) return; children.forEach(child => { if ((child.title && child.title.toLowerCase().indexOf(lowerCaseInput) >= 0) || (child.key && child.key.toString().toLowerCase().indexOf(lowerCaseInput) >= 0)){ result = true; } checkInChildren(child.children); }); } // Check current node and its descendants. checkInChildren([treeNode]); return result; }; ``` 此代码片段展示了如何遍历整个树状结构以找到所有满足条件的节点，而不仅仅是顶级节点。它不仅检查每个节点自身的标题(`title`)或键值(`key`)是否包含输入字符串的一部分，还会递归地在其后代节点中继续寻找可能存在的匹配项[^2]。 #### 使用示例 下面是一个完整的例子，说明如何配置 `TreeSelect` 来支持上述提到的模糊搜索特性: ```vue <template> <a-tree-select :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择..." allowClear showSearch :showArrow="false" :defaultExpandAll="true" :loadData="onLoadData" @search="handleSearchChange" :treeData="filteredTreeData" v-model:value="selectedKeys" :filterTreeNode="(value,node)=>filterTreeNode(value,node)" /> </template> <script lang="ts"> import { defineComponent, ref, watchEffect } from 'vue'; export default defineComponent({ setup() { const selectedKeys = ref([]); const originalTreeData = [ /* 初始化您的树形数据 */ ]; const filteredTreeData = ref([...originalTreeData]); const onLoadData = async () => {/* 加载更多数据 */}; const handleSearchChange = (value:string) => { console.log('用户正在搜索:', value); // 更新状态以便重新渲染视图 updateFilteredTreeData(value); }; const updateFilteredTreeData = (query='')=>{ // 这里可以根据查询参数调整实际要呈现给用户的树形数据集 // 对原始数据执行深拷贝操作以防意外修改源列表 const tempCopy=[...originalTreeData]; // 应用之前定义好的过滤器... filteredTreeData.value=tempCopy.filter(item=>filterTreeNode(query,item)); }; return { selectedKeys, originalTreeData, filteredTreeData, onLoadData, handleSearchChange, filterTreeNode }; }, }); </script> ``` 这段代码实现了基于用户输入动态更新可见树节点集合的效果，从而让用户能够更容易定位到所需的信息。每当用户改变搜索框内的文字时都会触发一次新的筛选过程，确保界面上始终反映出最新的搜索结果。