我使用的是 vue2 + antd， 那么 antd 的 tree 組件中沒(méi)有給我們封裝搜索，其官網(wǎng)提供的搜索也不是封裝好的，而且限制比較大，因?yàn)槲业臉?shù)形進(jìn)來(lái)要默認(rèn)展開(kāi)，官方的代碼是進(jìn)行了響應(yīng)式，就不能上來(lái)就全部展開(kāi)了

可以看一下，官方的代碼是這樣的，靈活性很低的還是

那我們自己來(lái)根據(jù)這個(gè)思路，進(jìn)行一下改裝， 首先看一下最終呈現(xiàn)是啥樣的：

如上圖，可以看到我們剛進(jìn)來(lái)的時(shí)候，就默認(rèn)是全部展開(kāi)的，然后上面有一個(gè)搜索框，這里我們可以自己定義交互，可以綁定成搜索的回車事件，也可以綁定change事件, 思路就是當(dāng)我們搜索以后，重置我們下面 tree 樹(shù)形的 輸入數(shù)據(jù) data，這樣就簡(jiǎn)單的實(shí)現(xiàn)了搜索以后顯示指定的樹(shù)形。

這里面復(fù)雜的地方在于那個(gè)遞歸，因?yàn)檫f歸的時(shí)候我們需要得到 1、 一個(gè)新數(shù)據(jù) 2、搜索子級(jí)的時(shí)候也要全部的父級(jí) 3、 搜索父級(jí)的時(shí)候也要全部的子級(jí)，下面來(lái)看看代碼

首先是vue模板中的代碼

<a-input-search   placeholder="搜索"  @change="searchOrg"  :allowClear="true"  v-model="searchPerson"></a-input-search><a-tree ref="tree" @select="onSelect" :tree-data="currentTree" default-expand-all />

從這里可以看出來(lái)，我們封裝的要比官方的輕量很多，ref 和 這里的邏輯是沒(méi)有涉及的，可以刪掉。

接下來(lái)看我們的業(yè)務(wù)代碼

<script>export default {  props: {    treeList: {      type: Array,      default: () => []    },  },  data() {    return {      searchPerson: "",      currentTree: this.treeList,    }  },  methods: {    searchTree(tree, keyword, includeChildren = false) {      const newTree = []      for (let i = 0; i < tree.length; i++) {const node = tree[i]if (node.title.includes(keyword)) {  // 如果當(dāng)前節(jié)點(diǎn)符合條件，則將其復(fù)制到新的樹(shù)形結(jié)構(gòu)中，并根據(jù) includeChildren 參數(shù)決定是否將其所有子節(jié)點(diǎn)也復(fù)制到新的樹(shù)形結(jié)構(gòu)中  newTree.push({ ...node, children: includeChildren ? this.searchTree(node.children || [], "", true) : [] })} else if (node.children) {  // 如果當(dāng)前節(jié)點(diǎn)不符合條件且存在子節(jié)點(diǎn)，則遞歸遍歷子節(jié)點(diǎn)，以繼續(xù)搜索  const result = this.searchTree(node.children, keyword, true)  if (result.length > 0) {    // 如果子節(jié)點(diǎn)中存在符合條件的節(jié)點(diǎn)，則將其復(fù)制到新的樹(shù)形結(jié)構(gòu)中    newTree.push({ ...node, children: result })  }}      }      return newTree    },    searchOrg() {      this.currentTree = this.searchTree(this.treeList, this.searchPerson, true)    },    async onSelect(selectedKeys, info) {    },  }}</script>

這里我的 tree-data 使用的是父組件傳入的 props ， 因?yàn)槲覀兒笃谝臄?shù)據(jù)，所以不能直接使用，要接一下， 在用戶輸入的時(shí)候，重置數(shù)據(jù)即可， 主要依賴于 searchTree 這個(gè)遞歸的方法，第三個(gè)參數(shù)是一個(gè)布爾值， 默認(rèn)是 false ，當(dāng)搜索到符合條件的父級(jí)節(jié)點(diǎn)時(shí)，除了將該節(jié)點(diǎn)復(fù)制到新的樹(shù)形結(jié)構(gòu)中，還會(huì)根據(jù) includeChildren 參數(shù)決定是否將其所有子節(jié)點(diǎn)也復(fù)制到新的樹(shù)形結(jié)構(gòu)中。如果 includeChildren 參數(shù)為 true，則遞歸遍歷其所有子節(jié)點(diǎn)，并將其復(fù)制到新的樹(shù)形結(jié)構(gòu)中。如果 includeChildren 參數(shù)為 false，則不會(huì)遞歸遍歷其子節(jié)點(diǎn)，只會(huì)將符合條件的父節(jié)點(diǎn)復(fù)制到新的樹(shù)形結(jié)構(gòu)中。

最終在我們搜索的時(shí)候可以呈現(xiàn)以下效果：

當(dāng)我們想從新獲取全部的時(shí)候，只需要情況輸入框即可，這樣我們的遞歸方法會(huì)把完整的樹(shù)形返回給我們~

到此這篇關(guān)于vue封裝tree組件實(shí)現(xiàn)搜索功能的文章就介紹到這了,更多相關(guān)vue tree搜索內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！