element-ui樹結構懶載入
阿新 • • 發佈:2018-11-10
在實際專案中,往往樹結構資料量較大,這時樹節點必須懶載入
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; },