el-tree懒加载同一个节点怎么第二次加载,需要再次获取数据
时间: 2023-07-20 11:05:08 浏览: 120
el-tree组件的懒加载是通过 `load` 方法来实现的,每次点击节点时都会调用该方法。如果你需要对同一个节点再次进行懒加载,可以在 `load` 方法中判断该节点是否已经加载过数据,如果已经加载过数据,则不需要再次获取数据,直接返回已有的数据即可。如果该节点之前没有加载过数据,那么就需要根据节点的唯一标识符(例如节点的 id)来获取数据,并在获取数据成功后将数据存储在该节点的 `children` 属性中,以备下次使用。具体实现方法可以参考以下代码示例:
```javascript
<template>
<el-tree :data="treeData" :load="loadNode" lazy></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: 'Node 1',
children: [],
loaded: false // 标记是否已经加载过数据
},
{
id: 2,
label: 'Node 2',
children: [],
loaded: false
}
]
}
},
methods: {
loadNode(node, resolve) {
if (node.loaded) {
// 如果已经加载过数据,直接返回已有的数据
resolve(node.children)
} else {
// 根据节点的 id 获取数据
axios.get(`/api/data?id=${node.id}`).then(response => {
node.children = response.data // 将获取到的数据存储在节点的 children 属性中
node.loaded = true // 标记节点已经加载过数据
resolve(node.children) // 返回获取到的数据
})
}
}
}
}
</script>
```
在上面的代码中,每个节点都有一个 `loaded` 属性,用于标记该节点是否已经加载过数据。如果节点已经加载过数据,则在调用 `load` 方法时直接返回已有的数据,否则根据节点的 `id` 获取数据,并将数据存储在节点的 `children` 属性中,以备下次使用。
阅读全文