el-tree?loadNode懶加載的實現(xiàn)
更新時間：2022年08月18日 12:03:47 作者：不能懶鴨
本文主要介紹了el-tree?loadNode懶加載的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
需要 lazy、 load 兩個屬性一起用
<el-tree? ? ? ? ? ?:data="treeData"? ? ? ? ? ?:props="defaultProps"? ? ? ? ? ?:load="loadNode"? ? ? ? ? ?@node-click="handleNodeClick"? ? ? ? ? ?lazy> </el-tree>
data() {
return {
treeDataList: [],
defaultProps: {
id: 'id',
label: 'name',
children: 'children',
parentId:'parentId',
isLeaf: false,// 指定節(jié)點(diǎn) 是否為葉子節(jié)點(diǎn)，僅在指定了 lazy 屬性的情況下生效
},
}
},loadNode(node, resolve) {
let that = this;
if (node.level === 0) {
that.getFatherData(resolve);//獲取頂級節(jié)點(diǎn)數(shù)據(jù)
}
if (node.level >= 1) {
this.getChildrenData(node.data.id, resolve);//異步獲取子節(jié)點(diǎn)數(shù)據(jù)
return resolve([]); // 防止在該節(jié)點(diǎn)沒有子節(jié)點(diǎn)時一直轉(zhuǎn)圈
}
},
獲取頂級節(jié)點(diǎn)數(shù)據(jù)：
getFatherData(resolve) {
let options = {
url: '',
data: {
parentId: 0
}
}
let res = await $.fn.commonPlugin.commonAjaxRequest(options)
if(res.flag){
let data = res.data;
data.forEach(item => {
item={...item,isLeaf:true}
});
resolve(data)
}
},
獲取子節(jié)點(diǎn)數(shù)據(jù)：
getChildrenData(parentId, resolve) {
let options = {
url: '',
data: {
parentId
}
}
let res = await $.fn.commonPlugin.commonAjaxRequest(options)
if(res.flag){
let data = res.data;
data.forEach(item => {
item={...item,isLeaf:false}
});
resolve(data)
}
},到此這篇關(guān)于el-tree loadNode懶加載的實現(xiàn)的文章就介紹到這了,更多相關(guān)el-tree loadNode懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄猇ue自定義事件(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了vue無限輪播插件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Ant Design Vue是使用Vue實現(xiàn)的遵循Ant Design設(shè)計規(guī)范的高質(zhì)量UI組件庫,用于開發(fā)和服務(wù)于企業(yè)級中后臺產(chǎn)品,下面這篇文章主要給大家介紹了關(guān)于vue中ant-design-vue組件安裝與使用的相關(guān)資料,需要的朋友可以參考下2022-04-04
今天小編就為大家分享一篇在vue中讀取本地Json文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3 Element-plus el-menu無限級菜單組件封裝過程
對于element中提供給我們的el-menu組件最多可以實現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進(jìn)行封裝，這篇文章主要介紹了Vue3 Element-plus el-menu無限級菜單組件封裝,需要的朋友可以參考下2023-04-04
vue.js數(shù)據(jù)響應(yīng)式原理解析
這篇文章主要介紹了vue.js數(shù)據(jù)響應(yīng)式原理解析，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
這篇文章主要介紹了vue跳轉(zhuǎn)方式（打開新頁面）及傳參操作,結(jié)合實例形式分析了vue.js跳轉(zhuǎn)實現(xiàn)方式與參數(shù)接受相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Vue.js組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式
這篇文章主要介紹了vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue+Java+Base64實現(xiàn)條碼解析的示例
這篇文章主要介紹了Vue+Java+Base64實現(xiàn)條碼解析的示例，幫助大家實現(xiàn)條碼解析，感興趣的朋友可以了解下2020-09-09