引言

最近開發專案時遇到一個需求就是採用tree的方式展示以萬為單位的資料，因為資料量大第一反應就是採用“懶載入”的方式實現，為了方便使用者在龐大的資料量中快速定位到某個節點搜尋功能也是必不可少的；因為採用“懶載入”資料，搜尋當然也是遠端搜尋了；確定了需求當然第一時間就去網上找有沒有小夥伴已經實現了相關元件，最後....,還是自己實現一個吧（由於公司採用的element-ui所以基於el-tree進行改造）；【這只是自己實現的一種思路，希望大家多多指正】

1.懶載入樹的實現

剛開始準備直接採用el-tree自帶的懶載入方式，但在實現過程中發現el-tree採用懶載入後沒有展開樹節點，這顯然行不通；思來想去懶載入不就是展開節點時再去載入資料嗎，我採用非lazy的形式自己控制就行了啊，於是有了下面的實現：

// 資料格式要求
const treeData = [
 {
  label: '節點1',id: '1',children: [] // 為了顯示展開的小箭頭凡是有子節點就需要帶上 
 },{
  label: '節點2',id: '2'
 }
]

在拿到上面的資料後我會對資料進行一些處理來實現展開時載入子節點資料，具體如下：

// 執行後資料變成下面的形式
const treeData = [
 {
  label: '節點1',children: [
   // 渲染節點時通過_state_來標識顯示載入狀態，如果網路中斷載入失敗
   //_state_ = 1,可點選重新載入再次索要資料，不用關閉節點再展開去載入
   // 之所以都載入id，是為了給el-tree新增node-key，方便樹的操作使用，具體見elementUI文件
   {id: '1-test','_state_': 0}
  ] // 為了顯示展開的小箭頭凡是有子節點就需要帶上 
 },id: '2'
 }
]

資料插入

在展開節點時獲取資料，然後獲取到展開點插入便是，el-tree提供了對應方法；

到這裡懶載入樹基本上就做好了

2.遠端搜尋實現

遠端搜尋框主要採用了el-select的遠端搜尋功能，這裡就不贅述了，主要介紹更具搜尋選中的id獲取的資料的和插入樹節點方式：

要求資料格式

const nodeData = {
 label: '節點1',// 最上層節點
 id: '1',children: [
  {label: '節點1-1',id: '1-1',chilrend: []},{label: '節點1-2',id: '1-2',chilrend:[]} // 搜尋對應id的節點
 ]
}

返回的資料就是你要獲取的節點id的兄弟節點及父節點的所有兄弟節點依次類推，直到這個節點分支的的根節點；聽起來有點繞，但是你可以腦補一下你展開這個節點後所有面上的節點你都是要有的；

將資料插入樹中

這段代首先會將資料和本地資料進行對比合並（剛開始設計時沒有合併，採用直接替換的方式，因為需要基於這個樹實現下拉選擇元件【如果對下拉樹元件感興趣可以留言，我給大家分享下我的思路，相對而言比這個元件的封裝複雜度要高一些】，並支援多選有預設值設定問題，才改為合併處理的方式；對比合並並不需要太多時間執行，因為新資料只會有一個節點與本地資料不同，所以還是很快的），然後找到本地需要插入資料的節點，執行插入即可；

3.效果圖展示

結語

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

參考連結

Vue

element-ui

到此這篇關於基於element-ui封裝可搜尋的懶載入tree元件的實現的文章就介紹到這了,更多相關element 可搜尋懶載入tree內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！