欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

el-tree?loadNode懶加載的實現(xiàn)

 更新時間:2022年08月18日 12:03:47   作者:不能懶鴨  
本文主要介紹了el-tree?loadNode懶加載的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

需要 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é)點 是否為葉子節(jié)點,僅在指定了 lazy 屬性的情況下生效
        },
    }
},
loadNode(node, resolve) {    
    let that = this;
    if (node.level === 0) {
        that.getFatherData(resolve);//獲取頂級節(jié)點數(shù)據(jù)
    }
    if (node.level >= 1) {
        this.getChildrenData(node.data.id, resolve);//異步獲取子節(jié)點數(shù)據(jù)
        return resolve([]); // 防止在該節(jié)點沒有子節(jié)點時一直轉圈
    }
},

獲取頂級節(jié)點數(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é)點數(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)
        } 
    },

到此這篇關于el-tree loadNode懶加載的實現(xiàn)的文章就介紹到這了,更多相關el-tree loadNode懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue-cli3啟動服務如何自動打開瀏覽器配置

    vue-cli3啟動服務如何自動打開瀏覽器配置

    這篇文章主要介紹了vue-cli3啟動服務如何自動打開瀏覽器配置,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue動態(tài)樣式方法實例總結

    Vue動態(tài)樣式方法實例總結

    在vue項目中,很多場景要求我們動態(tài)改變元素的樣式,下面這篇文章主要給大家介紹了關于Vue動態(tài)樣式方法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-02-02
  • Vue子父組件之間傳值的三種方法示例

    Vue子父組件之間傳值的三種方法示例

    Vue的組件化給前端開發(fā)帶來極大的便利,下面這篇文章主要給大家介紹了關于Vue子父組件之間傳值的三種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-02-02
  • vue中,在本地緩存中讀寫數(shù)據(jù)的方法

    vue中,在本地緩存中讀寫數(shù)據(jù)的方法

    今天小編就為大家分享一篇vue中,在本地緩存中讀寫數(shù)據(jù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue中key使用的問題示例解析

    vue中key使用的問題示例解析

    這篇文章主要為大家介紹了vue中key使用的問題示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • 基于vuejs+webpack的日期選擇插件

    基于vuejs+webpack的日期選擇插件

    這篇文章主要為大家詳細介紹了基于vuejs+webpack的日期選擇插件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • vue+vuex+axios+echarts畫一個動態(tài)更新的中國地圖的方法

    vue+vuex+axios+echarts畫一個動態(tài)更新的中國地圖的方法

    本篇文章主要介紹了vue+vuex+axios+echarts畫一個動態(tài)更新的中國地圖的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-12-12
  • Vue3中vuex的基本使用方法實例

    Vue3中vuex的基本使用方法實例

    Vuex是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應用的所有組件的狀態(tài),并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關于Vue3中vuex的基本使用方法,需要的朋友可以參考下
    2022-04-04
  • vue性能優(yōu)化之cdn引入vue-Router的問題

    vue性能優(yōu)化之cdn引入vue-Router的問題

    這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue自定義指令實現(xiàn)元素滑動移動端適配及邊界處理

    vue自定義指令實現(xiàn)元素滑動移動端適配及邊界處理

    這篇文章主要為大家介紹了vue自定義指令實現(xiàn)元素滑動移動端適配及邊界處理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09

最新評論