這篇文章主要講解了如何實(shí)現(xiàn)element-ui封裝可搜索的懶加載tree組件，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

成都創(chuàng)新互聯(lián)公司提供做網(wǎng)站、成都做網(wǎng)站、網(wǎng)頁設(shè)計(jì)，高端網(wǎng)站設(shè)計(jì)，一元廣告等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作，十載的網(wǎng)站開發(fā)和建站經(jīng)驗(yàn),助力企業(yè)信息化建設(shè)，成功案例突破上千余家,是您實(shí)現(xiàn)網(wǎng)站建設(shè)的好選擇.

引言

最近開發(fā)項(xiàng)目時(shí)遇到一個(gè)需求就是采用tree的方式展示以萬為單位的數(shù)據(jù)，因?yàn)閿?shù)據(jù)量大第一反應(yīng)就是采用“懶加載”的方式實(shí)現(xiàn)，為了方便用戶在龐大的數(shù)據(jù)量中快速定位到某個(gè)節(jié)點(diǎn)搜索功能也是必不可少的；因?yàn)椴捎谩皯屑虞d”數(shù)據(jù)，搜索當(dāng)然也是遠(yuǎn)程搜索了；確定了需求當(dāng)然第一時(shí)間就去網(wǎng)上找有沒有小伙伴已經(jīng)實(shí)現(xiàn)了相關(guān)組件，最后....,還是自己實(shí)現(xiàn)一個(gè)吧（由于公司采用的element-ui所以基于el-tree進(jìn)行改造）；【這只是自己實(shí)現(xiàn)的一種思路，希望大家多多指正】

1.懶加載樹的實(shí)現(xiàn)

剛開始準(zhǔn)備直接采用el-tree自帶的懶加載方式，但在實(shí)現(xiàn)過程中發(fā)現(xiàn)el-tree采用懶加載后沒有展開樹節(jié)點(diǎn)，這顯然行不通；思來想去懶加載不就是展開節(jié)點(diǎn)時(shí)再去加載數(shù)據(jù)嗎，我采用非lazy的形式自己控制就行了啊，于是有了下面的實(shí)現(xiàn)：

// 數(shù)據(jù)格式要求
const treeData = [
 {
  label: '節(jié)點(diǎn)1',
  id: '1',
  children: [] // 為了顯示展開的小箭頭凡是有子節(jié)點(diǎn)就需要帶上 
 },
 {
  label: '節(jié)點(diǎn)2',
  id: '2'
 }
]

在拿到上面的數(shù)據(jù)后我會(huì)對(duì)數(shù)據(jù)進(jìn)行一些處理來實(shí)現(xiàn)展開時(shí)加載子節(jié)點(diǎn)數(shù)據(jù)，具體如下：

// 執(zhí)行后數(shù)據(jù)變成下面的形式
const treeData = [
 {
  label: '節(jié)點(diǎn)1',
  id: '1',
  children: [
   // 渲染節(jié)點(diǎn)時(shí)通過_state_來標(biāo)識(shí)顯示加載狀態(tài)，如果網(wǎng)絡(luò)中斷加載失敗
   //_state_ = 1,可點(diǎn)擊重新加載再次索要數(shù)據(jù)，不用關(guān)閉節(jié)點(diǎn)再展開去加載
   // 之所以都加載id，是為了給el-tree添加node-key，方便樹的操作使用，具體見elementUI文檔
   {id: '1-test', '_state_': 0}
  ] // 為了顯示展開的小箭頭凡是有子節(jié)點(diǎn)就需要帶上 
 },
 {
  label: '節(jié)點(diǎn)2',
  id: '2'
 }
]

數(shù)據(jù)插入

在展開節(jié)點(diǎn)時(shí)獲取數(shù)據(jù)，然后獲取到展開點(diǎn)插入便是，el-tree提供了對(duì)應(yīng)方法；

到這里懶加載樹基本上就做好了

2.遠(yuǎn)程搜索實(shí)現(xiàn)

遠(yuǎn)程搜索框主要采用了el-select的遠(yuǎn)程搜索功能，這里就不贅述了，主要介紹更具搜索選中的id獲取的數(shù)據(jù)的和插入樹節(jié)點(diǎn)方式：

要求數(shù)據(jù)格式

const nodeData = {
 label: '節(jié)點(diǎn)1', // 最上層節(jié)點(diǎn)
 id: '1',
 children: [
  {label: '節(jié)點(diǎn)1-1', id: '1-1', chilrend: []},
  {label: '節(jié)點(diǎn)1-2', id: '1-2', chilrend:[]} // 搜索對(duì)應(yīng)id的節(jié)點(diǎn)
 ]
}

返回的數(shù)據(jù)就是你要獲取的節(jié)點(diǎn)id的兄弟節(jié)點(diǎn)及父節(jié)點(diǎn)的所有兄弟節(jié)點(diǎn)依次類推，直到這個(gè)節(jié)點(diǎn)分支的的根節(jié)點(diǎn)；聽起來有點(diǎn)繞，但是你可以腦補(bǔ)一下你展開這個(gè)節(jié)點(diǎn)后所有面上的節(jié)點(diǎn)你都是要有的；

將數(shù)據(jù)插入樹中

這段代首先會(huì)將數(shù)據(jù)和本地?cái)?shù)據(jù)進(jìn)行對(duì)比合并（剛開始設(shè)計(jì)時(shí)沒有合并，采用直接替換的方式，因?yàn)樾枰谶@個(gè)樹實(shí)現(xiàn)下拉選擇組件【如果對(duì)下拉樹組件感興趣可以留言，我給大家分享下我的思路，相對(duì)而言比這個(gè)組件的封裝復(fù)雜度要高一些】，并支持多選有默認(rèn)值設(shè)置問題，才改為合并處理的方式；對(duì)比合并并不需要太多時(shí)間執(zhí)行，因?yàn)樾聰?shù)據(jù)只會(huì)有一個(gè)節(jié)點(diǎn)與本地?cái)?shù)據(jù)不同，所以還是很快的），然后找到本地需要插入數(shù)據(jù)的節(jié)點(diǎn)，執(zhí)行插入即可；

3.效果圖展示

看完上述內(nèi)容，是不是對(duì)如何實(shí)現(xiàn)element-ui封裝可搜索的懶加載tree組件有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。