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

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

引言

最近開發(fā)項目時遇到一個需求就是采用tree的方式展示以萬為單位的數(shù)據(jù)，因為數(shù)據(jù)量大第一反應就是采用“懶加載”的方式實現(xiàn)，為了方便用戶在龐大的數(shù)據(jù)量中快速定位到某個節(jié)點搜索功能也是必不可少的；因為采用“懶加載”數(shù)據(jù)，搜索當然也是遠程搜索了；確定了需求當然第一時間就去網(wǎng)上找有沒有小伙伴已經(jīng)實現(xià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)絡中斷加載失敗
   //_state_ = 1,可點擊重新加載再次索要數(shù)據(jù)，不用關閉節(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提供了對應方法；

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

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:[]} // 搜索對應id的節(jié)點
 ]
}

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

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

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

3.效果圖展示

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

分享題目：如何實現(xiàn)element-ui封裝可搜索的懶加載tree組件
網(wǎng)頁URL：http://www.rwnh.cn/article28/psgsjp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、定制開發(fā)、域名注冊、網(wǎng)站內(nèi)鏈、外貿(mào)建站、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)