vue3中tree组件懒加载+分页

1、 想实现的效果

两层树形结构，点击父节点后会加载子节点并显示出来，分页
用到的组件：Tree树形控件

2、出现的问题

初始化界面时第一页的数据会重复出现，点击第二页、第三页则正常显示

<el-tree
            :data="projectOptions"
            :props="defaultProps"
            @node-click="handleAttachClick"
            lazy
            :load="loadNode"
          />

onMounted(() => {
  getProAttTree(); // 在组件挂载时调用
});

// 初始化projectOptions

async function getProAttTree(paramss) {
  try {
    const response = await currentProject(queryParams.value);
    if (!Array.isArray(response.rows)) {
      throw new Error("Expected rows to be an array");
    }
    total.value = response.total;
    projectOptions.value = response.rows.map((project) => ({
      ...project,
      children: [],
      isLeaf: false,
    }));
  } catch (error) {
    console.error(error);
    throw error;
  }
}

出现该问题的原因，是因为loadNode方法里本来有个 if (node.level === 0) { } 对父节点进行处理的操作，导致在getProAttTree（）方法里被赋值一次，然后又被复制一次
解决方法：删除 if (node.level === 0) { } 这部分，如下：然后调用分页就可以正常调用了

function loadNode(node, resolve) {
  if (node.level === 1) {
    // 懒加载子节点
    setTimeout(() => {
      getFileListByProjectId(node.data.id).then((response) => {
        let data = response.data.map((project) => ({
          ...project,
          children: [],
          isLeaf: true,
          projectName: project.attachmentName,
        }));
        resolve(data);
      });
    }, 1000); // 模拟异步请求
  }
}