TreeData 數據查找

最近做需求的時候遇到了這樣的一個需求，Tree組件數據支持查找，而且TreeData的數據層級是無限級的

開始想的事借助UI組件庫（Ant-design-vue）中的Tree組件的相關方法直接實現,看了下api 發現沒法實現，后來想通過手動構建節點樹實現，這樣就需要寫遞歸組件，需要重新寫編輯，刪除邏輯（本人有點懶所以就沒采取），最后還是在數據上動手。

先封裝一個查詢方法

// 獲取配置。  Object.assign 從一個或多個源對象復制到目標對象
const getConfig = (config: Partial<TreeHelperConfig>) => Object.assign({}, DEFAULT_CONFIG, config);// 查詢方法 通過傳入比較函數，找出符合規則的數據
export function filter<T = any>(tree: T[],func: (n: T) => boolean,// Partial 將 T 中的所有屬性設為可選config: Partial<TreeHelperConfig> = {},
): T[] {// 獲取配置config = getConfig(config);const children = config.children as string;function listFilter(list: T[]) {return list.map((node: any) => ({ ...node })).filter((node) => {// 遞歸調用 對含有children項  進行再次調用自身函數 listFilternode[children] = node[children] && listFilter(node[children]);// 執行傳入的回調 func 進行過濾return func(node) || (node[children] && node[children].length);});}// 返回符合結果數據return listFilter(tree);
}

方法調用

    const fieldNames = { children: 'children', title: 'name', key: 'id' };treeData.value = filter(//原始數據originalTreeData, //過濾函數(node) => {const result = node[titleField]?.includes(searchValue.value) ?? false;if (result) {expandedKeys.value.push(node[keyField]);}return result;},fieldNames,);

這就實現了，此種方法可以支持element、ant-design-vue、iview 等多種Ui框架