naiveUI Tree默认选择怎么选不上啊？

Question

发现在数据初始化的时候写死可以选上：

但如果经过接口响应后赋值的id就选不上了：

Answer 1

引自免费微信小程序：皆我百晓生

在使用 naiveUI 的 Tree 组件时，你可能遇到了数据动态加载后初始选中状态没有生效的问题。这个问题通常源于初始化时 Tree 组件的 default-checked-keys 或者 checked-keys 属性没有正确绑定到异步获取的数据上。

首先，请确保你已经按照官方文档设置了这些属性：

<template>
  <n-tree ref="treeRef" :data="treeData" :default-checked-keys="checkedKeys" @check="onCheck" />
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const treeRef = ref(null);
    const checkedKeys = ref([]);

    // 假设 asyncTreeData 是通过接口获取的树形数据
    const asyncTreeData = [
      // ...
    ];

    // 在组件挂载后或数据获取完成后设置默认选中的 keys
    onMounted(async () => {
      const response = await fetchYourData(); // 替换为你的实际请求方法
      const processedDataWithCheckedKeys = processResponse(response); // 处理响应并提取需要选中的 key

      checkedKeys.value = processedDataWithCheckedKeys.checkedKeys;
      // 更新树的数据源
      treeData.value = asyncTreeData;
      // 触发 Tree 组件重新渲染以应用选中状态
      treeRef.value.setCheckedKeys(checkedKeys.value);
    });

    function onCheck({ checkedKeys }) {
      // 可以在这里处理选中项的变化
      this.checkedKeys = checkedKeys;
    }

    return {
      treeRef,
      checkedKeys,
      // ... 其他相关数据和方法
    };
  },
});
</script>

关键点在于：

1. 初始化 checkedKeys 作为 ref，并且在数据获取之后根据返回结果更新它。
2. 在获取到异步数据后，不仅更新 treeData，还要调用 setCheckedKeys 方法来手动设置选中的节点。

请确认你在实际项目中是否正确实现了上述逻辑，以及从接口返回的数据结构中正确提取了需要被默认选中的节点 ID。如果问题依然存在，请检查响应数据格式及 checkedKeys 是否与数据中的 key 匹配。