【element-ui】element UI tree 控件，点击父节点进行异步加载
点击父节点，获取该节点的id，然后渲染成子节点，
目前id已获取，子节点数据也请求到了，不知道怎么渲染到该节点下面
看官方介绍有一个load参数--加载子树数据的方法，有没有用过的同志来指导一下怎么用
<el-tree :props="props1"
:load="loadNode1"
node-key="id"
ref="tree"
highlight-current
lazy
show-checkbox
@node-click="handleNodeClick">
</el-tree>
loadNode(node, resolve){ console.log(node);
// if (node.level === 0) {
// return resolve([{ name: 'region' }]);
// }
// if (node.level > 1) return resolve([]);
// setTimeout(() => {
// const data = [];
//
// resolve(data);
// }, 500);
},
getClickchild(id) {
alert(id)
axios.get('/api/bank/oprtion/oprtionList.do?id='+id)
.then(function(res) {
console.log(res.data)
loadNode
})
.catch(function(error) {
console.log(error)
})
},
handleNodeClick(data) {
// this.clickId = data.id
console.log(data.id);
this.getClickchild(data.id)
}}
回答：
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)
}
})
}
回答：
刚刚解决。
首先文档的setTimeout,其实就是异步加载；
还是上代码吧。
我用的axios，都一样。
例：
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.count++
// },
// {
// name: "zone" + this.count++
// }
// ];
// } else {
// data = [];
// }
// resolve(data);
// }, 500);
},
然后就是异步
//伪代码getUser(node.data.fence, node.data.id, resolve){
axios.post().then(res=> {
let data = res.data;//改成tree需要的格式
resolve(data);//解决？
})
}
以上。
另外，element的文档确实有点问题啊。需要仔细领悟。
回答：
遇到同样的问题，找到解决的办法了吗
回答：
treeProps: { label: 'name',
children: [],
isLeaf: 'isLeaf'
},
'isLeaf' 在请求数据后我已经给它设置了true 但是，不显示下拉箭头啊 。所以我点击他也不会继续请求下一级 。怎么回事有人知道吗？
第二个问题 ，这里的children到底有什么用？为啥各位的demo都是把它设置为空数组？childen不应该是映射到树状图数据的具体字段吗？
回答：
那如果我执行增删改之后，要刷新某一级的树的数据，调接口重新获取，该怎么去调用
loadNode(node, resolve) {
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);
});
});
},
怎么去传参？
回答：
异步加载的解决了吗？
以上是 【element-ui】element UI tree 控件，点击父节点进行异步加载 的全部内容， 来源链接： utcz.com/a/153816.html
