vue3 - 如何解决 naive-ui tree 组件异步加载情况下子节点还没有加载就勾选父节点导致报错 SubtreeNotLoadedError 的问题？

Question

naive-ui 的 tree 组件有异步加载的功能，但是当勾选的父节点还没有加载子节点时候控制台上会报错：
Uncaught Error: SubtreeNotLoadedError: checking a subtree whose required nodes are not fully loaded.
要如何解决这个问题？
比如我可以自己写代码检测当勾选的节点还没有初始化的话就先初始化再勾选

Answer 1

当勾选的节点还没有加载子节点时，可以通过自定义代码来实现异步加载并勾选的功能。以下是一种可能的解决方案：

1. 在 Tree 组件中，添加一个 before-check 的监听事件，用于在勾选节点之前进行处理。

html
<template>
<na-tree :data="treeData" @before-check="handleBeforeCheck"></na-tree>
</template>

2. 在 handleBeforeCheck 方法中，检查当前节点是否已经加载了子节点。如果没有加载，则先加载子节点，再勾选节点。

methods: {
async handleBeforeCheck(node) {

if (!node.children) {  // 加载子节点数据，例如通过接口请求  const children = await this.loadChildren(node.id);  // 将子节点数据赋值给当前节点  node.children = children;  // 勾选当前节点  node.checked = true;}

},
loadChildren(nodeId) {

// 这里可以根据需要进行异步加载子节点的逻辑// 返回 Promise 对象，用于在加载完成后执行后续操作return new Promise((resolve, reject) => {  // 异步加载子节点数据  // ...  // 加载完成后 resolve 结果  resolve(children);});

},
}

如果是这个解决的话基本可行，但还可以进行一些改进：

1. 可以添加一个 loading 状态，用于在加载子节点期间显示加载中的状态，提高用户体验。

data() {
return {

loading: false,

};
},
methods: {
async handleBeforeCheck(node) {

if (!node.children) {  this.loading = true;  try {    const children = await this.loadChildren(node.id);    node.children = children;    node.checked = true;  } catch (error) {    // 处理加载失败的情况  } finally {    this.loading = false;  }}

},
}

2. 在加载子节点数据的过程中，可以添加错误处理逻辑，例如在加载失败时给出提示或进行重试。

loadChildren(nodeId) {
return new Promise((resolve, reject) => {

// 异步加载子节点数据// ...// 加载完成后 resolve 结果，或者在加载失败时 reject 错误if (success) {  resolve(children);} else {  reject(new Error('Failed to load children'));}

});
},