Naive UI的Tree组件点击节点后子节点不显示怎么办?

Designer°俊俊 阅读 26

在用Naive UI的Tree组件时,按照文档写了动态加载子节点的逻辑,但点击父节点后子节点数据更新了,界面就是不显示出来:


<n-tree
  :key="treeKey"
  :data="treeData"
  @expand="handleExpand"
/>

在handleExpand里调用了异步接口获取子节点数据,成功后用setTreeData更新了节点的children字段,并且用forceUpdate()刷新组件,但展开箭头会先变空白再恢复原样,子节点始终不显示。尝试过给节点加uniqueKeys和设置加载状态也没用,问题到底出在哪呢?

我来解答 赞 5 收藏
二维码
手机扫码查看
1 条解答
端木东正
我之前这样搞的,问题出在只更新了children但没触发Vue响应式,得用ref包裹整个treeData,更新时替换对应节点再赋值。试试这样:

const node = findNode(treeData, key)
node.children = res
treeData = [...treeData]


或者直接用n-treeloaded-keys配合异步加载,比手动改data靠谱多了。
点赞 6
2026-02-10 10:03