1. 程式人生 > >element-ui樹結構懶載入

element-ui樹結構懶載入

在實際專案中,往往樹結構資料量較大,這時樹節點必須懶載入

element-ui樹的懶載入:

<div style="width:100%;height:420px;overflow: auto;">
                        <el-tree lazy :load="getOrgList" :props="defaultProps" highlight-current @node-click="handleNodeClick">
                        </el-tree>
</div>

js程式碼如下:

defaultProps: {
                    children: "children",
                    label: "name"
                },

樹節點形式為:

 [
        {
            "id": "1",
            "name": "國家電網",
            "status": null,
            "isCheck": null,
            "children": []
        }
    ]

 

getOrgList方法如下:

/**
             * 懶載入樹獲取組織機構子節點
             * element-tree使用方法
             * @param node:當前點選節點資訊
             * @param resolve:傳遞引數方法
             * */
            getOrgList(node,resolve) {
                /*this.$http.get(`${process.env.NODE_ENV}/admin/org/selectall`)
                    .then((response) => {
                        this.data2 = response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
*/ let self = this; console.log(node); if(node.level == 0){ self.$http.get(`${process.env.NODE_ENV}/admin/org/selectall`).then(res => { let treeData = [] res.data.data.forEach(e => { treeData.push(e) }) resolve(treeData); }).catch(res => { resolve([]); }) }else{ console.log("當前節點id值為:"+node.data.id) self.$http.get(`${process.env.NODE_ENV}/admin/org/selectall/${node.data.id}`).then(res => { let myList = []; res.data.data.forEach(e => { myList.push(e) }) resolve(myList); }).catch(res => { resolve([]); }) } },

 

handleNodeClick方法如下:

                        // 點選樹
            handleNodeClick(data) {
                console.log("點選樹節點");
                console.log(data);
                this.clickTree = data;
            },