vue el-tree 一级节点是死数据,二级节点是请求的数据,怎么渲染
时间: 2023-12-14 21:07:14 浏览: 70
你可以在 el-tree 的 data 属性中,为一级节点设置固定的数据,然后通过监听 el-tree 的 node-expand 事件,在展开一级节点时,使用异步请求获取二级节点的数据,并将数据添加到对应的一级节点下的 children 属性中。具体实现可以参考以下代码:
```html
<template>
<el-tree :data="treeData" :load="loadData" @node-expand="handleNodeExpand"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: '一级节点1',
children: [] // 初始为空
},
{
label: '一级节点2',
children: [] // 初始为空
}
]
}
},
methods: {
handleNodeExpand(node) {
if (node.level === 0 && node.children.length === 0) {
// 如果是一级节点且 children 为空,则发送请求获取数据
this.loadData(node.data).then(data => {
node.children = data
})
}
},
loadData(data) {
// 异步请求数据
return new Promise((resolve, reject) => {
// ...
})
}
}
}
</script>
```
在上述代码中,我们首先在 data 中定义了一个 treeData 数组,其中包含了两个一级节点,children 初始为空。然后,我们监听了 el-tree 的 node-expand 事件,当展开一级节点时,会触发该事件,我们在事件处理函数中判断当前节点是否为一级节点且 children 为空,如果是,则发送异步请求获取二级节点数据,并将数据添加到一级节点的 children 属性中,这样就能够动态渲染 el-tree 的节点了。
阅读全文