引言

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

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

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

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

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

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

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

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

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

2.遠程搜索實現(xiàn)

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

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

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

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

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

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

3.效果圖展示

結(jié)語

這只是我個人對業(yè)務(wù)的一種解決方式，存在的不足還希望大家多指正；同時也希望得到大家的鼓勵，讓我在前端的道路上繼續(xù)努力進步:grinning:。

參考鏈接

Vue

element-ui

到此這篇關(guān)于基于element-ui封裝可搜索的懶加載tree組件的實現(xiàn)的文章就介紹到這了,更多相關(guān)element 可搜索懶加載tree內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！