el-tree?loadNode懶加載如何實現

這篇文章主要介紹了el-tree loadNode懶加載如何實現的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇el-tree loadNode懶加載如何實現文章都會有所收獲，下面我們一起來看看吧。

需要 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,// 指定節點 是否為葉子節點，僅在指定了 lazy 屬性的情況下生效
        },
    }
},

loadNode(node, resolve) {    
    let that = this;
    if (node.level === 0) {
        that.getFatherData(resolve);//獲取頂級節點數據
    }
    if (node.level >= 1) {
        this.getChildrenData(node.data.id, resolve);//異步獲取子節點數據
        return resolve([]); // 防止在該節點沒有子節點時一直轉圈
    }
},

獲取頂級節點數據：

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)
    }
},

獲取子節點數據：

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懶加載如何實現”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“el-tree loadNode懶加載如何實現”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。