html:
<el-tree
:props="props"
:load="loadNode"
node-key="id"
ref="tree"
highlight-current
lazy
show-checkbox
@node-click="handleNodeClick">
</el-tree>
data:
props: {
label: 'indexName',
children: [],
isLeaf: 'leaf'
}
js:
//
handleNodeClick (data) {
console.log('node', data)
},
//
loadNode (node, resolve) {
// console.log(node, resolve)
//
if (node.level === 0) {
this.requestTree(resolve)
}
//
if (node.level >= 1) {
// resolve
this.getIndex(node, resolve)
}
},
//
getIndex (node, resolve) {
this.$AxiosAjax({
loading: true,
url: API_BASICQUOTA.getCatalogInfoByLevel,
params: {id: node.data.id, level: node.data.level + 1 + '', type: 'all'}
}).then(res => {
if (res.data.code === '200') {
//
res.data.catalogInfo.forEach(et => {
if (et.isIndex === '1') {
et.leaf = true
} else {
et.leaf = false
}
})
let data = res.data.catalogInfo
console.log(data)
resolve(data)
}
})
},
//
requestTree (resolve) {
this.$AxiosAjax({
loading: true,
url: API_BASICQUOTA.getCatalogInfoByLevel,
params: {id: '', level: '1', type: 'all'}
}).then(res => {
if (res.data.code === '200') {
//
res.data.catalogInfo.forEach(et => {
if (et.isIndex === '1') {
et.leaf = true
} else {
et.leaf = false
}
})
let data = res.data.catalogInfo
resolve(data)
}
})
}
just solved.
first of all, the setTimeout, of the document is actually loaded asynchronously;
let's go to the code.
I use the same axios,.
example:
loadNode(node, resolve) {
if (node.level == 1) {
console.log(node.data);
//resolve
this.getUser(node.data.fence, node.data.id, resolve);
}
// setTimeout(() => {
// var data;
// if (hasChild) {
// data = [
// {
// name: "zone" + this.countPP
// },
// {
// name: "zone" + this.countPP
// }
// ];
// } else {
// data = [];
// }
// resolve(data);
// }, 500);
},
then asynchronous
//
getUser(node.data.fence, node.data.id, resolve){
axios.post().then(res=> {
let data = res.data;//tree
resolve(data);//
})
}
above.
besides, there is something wrong with element's documentation. It needs to be understood carefully.
encountered the same problem. Have you found a solution
asynchronous loading?
treeProps: {
label: 'name',
children: [],
isLeaf: 'isLeaf'
},
'isLeaf' I have set the true for it after requesting the data, but the drop-down arrow is not displayed. So I click on him and I won't continue to ask for the next level. What's going on? does anyone know?
second question, what exactly is the use of children here? Why do all of your demo set it to an empty array? Shouldn't childen be a specific field mapped to tree view data?
so if I want to refresh the data of the tree at a certain level and call the API to retrieve it, how should I call
loadNode (node, resolve) {
after I perform the addition, deletion and modification?
if (node.level === 0) {
Promise.all([this.getNodes("")]).then(function(res) {
resolve(res[0]);
});
} else if (node.level > 1) {
resolve([]);
} else {
Promise.all([this.getNodes(node.data.id)]).then(function(res) {
resolve(res[0]);
});
}
},
getNodes(id) {
return new Promise(function(resolve, reject) {
getBarndTree({
parentProductCategory: id
}).then(res => {
resolve(res);
});
});
},
how to pass parameters?