快捷導(dǎo)航

vue封裝tree組件實(shí)現(xiàn)搜索功能

更新時(shí)間：2023年05月15日 10:27:19 作者：code_Bo

本文主要介紹了vue封裝tree組件實(shí)現(xiàn)搜索功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

iShot_2023-05-09_18.57.35.png

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

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

iShot_2023-05-09_19.00.39.png

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

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

首先是vue模板中的代碼

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

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

接下來看我們的業(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ù)制到新的樹形結(jié)構(gòu)中，并根據(jù) includeChildren 參數(shù)決定是否將其所有子節(jié)點(diǎn)也復(fù)制到新的樹形結(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ù)制到新的樹形結(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ù)制到新的樹形結(jié)構(gòu)中，還會(huì)根據(jù) includeChildren 參數(shù)決定是否將其所有子節(jié)點(diǎn)也復(fù)制到新的樹形結(jié)構(gòu)中。如果 includeChildren 參數(shù)為 true，則遞歸遍歷其所有子節(jié)點(diǎn)，并將其復(fù)制到新的樹形結(jié)構(gòu)中。如果 includeChildren 參數(shù)為 false，則不會(huì)遞歸遍歷其子節(jié)點(diǎn)，只會(huì)將符合條件的父節(jié)點(diǎn)復(fù)制到新的樹形結(jié)構(gòu)中。

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

iShot_2023-05-09_19.12.40.png