引言

最近開(kāi)發(fā)項(xiàng)目時(shí)遇到一個(gè)需求就是采用tree的方式展示以萬(wàn)為單位的數(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)上找有沒(méi)有小伙伴已經(jīng)實(shí)現(xiàn)了相關(guān)組件，最后....,還是自己實(shí)現(xiàn)一個(gè)吧（由于公司采用的element-ui所以基于el-tree進(jìn)行改造）；【這只是自己實(shí)現(xiàn)的一種思路，希望大家多多指正】

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

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

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

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

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

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

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

到這里懶加載樹(shù)基本上就做好了

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

遠(yuǎn)程搜索框主要采用了el-select的遠(yuǎn)程搜索功能，這里就不贅述了，主要介紹更具搜索選中的id獲取的數(shù)據(jù)的和插入樹(shù)節(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)；聽(tīng)起來(lái)有點(diǎn)繞，但是你可以腦補(bǔ)一下你展開(kāi)這個(gè)節(jié)點(diǎn)后所有面上的節(jié)點(diǎn)你都是要有的；

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

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

3.效果圖展示

結(jié)語(yǔ)

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

參考鏈接

Vue

element-ui

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

最新評(píng)論