引言

最近開發(fā)項(xiàng)目時遇到一個需求就是采用tree的方式展示以萬為單位的數(shù)據(jù)，因?yàn)閿?shù)據(jù)量大第一反應(yīng)就是采用“懶加載”的方式實(shí)現(xiàn)，為了方便用戶在龐大的數(shù)據(jù)量中快速定位到某個節(jié)點(diǎn)搜索功能也是必不可少的；因?yàn)椴捎谩皯屑虞d”數(shù)據(jù)，搜索當(dāng)然也是遠(yuǎn)程搜索了；確定了需求當(dāng)然第一時間就去網(wǎng)上找有沒有小伙伴已經(jīng)實(shí)現(xiàn)了相關(guān)組件，最后....,還是自己實(shí)現(xiàn)一個吧（由于公司采用的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ù)據(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ù)后我會對數(shù)據(jù)進(jìn)行一些處理來實(shí)現(xiàn)展開時加載子節(jié)點(diǎn)數(shù)據(jù)，具體如下：

// 執(zhí)行后數(shù)據(jù)變成下面的形式
const treeData = [
 {
  label: '節(jié)點(diǎn)1',
  id: '1',
  children: [
   // 渲染節(jié)點(diǎn)時通過_state_來標(biāo)識顯示加載狀態(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ù)據(jù)，然后獲取到展開點(diǎn)插入便是，el-tree提供了對應(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:[]} // 搜索對應(yīng)id的節(jié)點(diǎn)
 ]
}

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

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

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

3.效果圖展示

結(jié)語

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

參考鏈接

Vue

element-ui

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

最新評論