歡迎您光臨本站 註冊首頁

基於element-ui封裝可搜索的懶加載tree組件的實現_vue.js

←手機掃碼閱讀     kyec555 @ 2020-06-11 , reply:0

引言

最近開發項目時遇到一個需求就是採用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',    id: '1',    children: [     // 渲染節點時通過_state_來標識顯示加載狀態,如果網絡中斷加載失敗     //_state_ = 1,可點擊重新加載再次索要數據,不用關閉節點再展開去加載     // 之所以都加載id,是為了給el-tree添加node-key,方便樹的操作使用,具體見elementUI文檔     {id: '1-test', '_state_': 0}    ] // 為了顯示展開的小箭頭凡是有子節點就需要帶上    },   {    label: '節點2',    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:。

 


[kyec555 ] 基於element-ui封裝可搜索的懶加載tree組件的實現_vue.js已經有287次圍觀

http://coctec.com/docs/vue-js/show-post-237997.html