Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[t-tree] 在懒加载的情况下,设置展开节点时无法展开深层次的节点 只能展开一次 #4955

Open
mayday97 opened this issue Jan 23, 2025 · 4 comments

Comments

@mayday97
Copy link

tdesign-vue-next 版本

1.10.6

重现链接

No response

重现步骤

比如我想展开 1、1.1、1.1.1 三个层级时 当我点击按钮设置 expanded 的值后 只能展开 1 这一级, 1.1 和1.1.1 无法展开
`

<t-button @click="handleOpen">展开某一级
<t-tree
ref="tree"
:data="items"
hover
v-model:expanded="expandedClassify"
:check-strictly="checkStrictly"
:load="load"
value-mode="all"
@load="onLoad"
/>

<script setup> import { ref } from 'vue'; const checkable = ref(true); const checkStrictly = ref(false); const expandedClassify=ref([]) const items = ref([ { label: '1', value: '1', children: true, }, { label: '2', value: '2', children: true, }, ]); const onLoad = (state) => { console.log('on load:', state); }; const load = (node) => { return new Promise((resolve) => { setTimeout(() => { let nodes = []; if (node.level < 6) { nodes = [ { label: `${node.label}.1`, value: `${node.value}.1`, children: true, }, { label: `${node.label}.2`, value: `${node.value}.2`, children: true, }, ]; } resolve(nodes); }, 1000); }); }; function handleOpen(){ // 比如展开到 1.1.1 const arr=['1','1.1','1.1.1'] expandedClassify.value=arr } </script>`

期望结果

No response

实际结果

No response

框架版本

Vue(3.5.13)

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

Copy link
Contributor

👋 @mayday97,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

@msg-fobbit
Copy link
Contributor

msg-fobbit commented Jan 24, 2025

我按照你的代码复现了一下,没有出现这个问题
复现链接:https://bolt.new/~/wuf7i6nb-gas1zttb

2025-01-24.11.13.17.mov

@mayday97
Copy link
Author

我按照你的代码复现了一下,没有出现这个问题 复现链接:https://bolt.new/~/wuf7i6nb-gas1zttb

2025-01-24.11.13.17.mov

我直接用你这个复现连接 还是不行

20250124-133526.mp4

@msg-fobbit
Copy link
Contributor

msg-fobbit commented Jan 24, 2025

我明白你的意思了,一开始理解错了。这个问题应该是t-tree组件的懒加载机制导致的。当设置expanded为 ['1', '1.1', '1.1.1'] 时,1.1 和 1.1.1 的 DOM 节点还没有被加载,因此无法展开。把handleOpen函数修改一下可以解决。例如:

async function handleOpen() {
  const targetPath = ['1', '1.1', '1.1.1']; // 目标展开路径

  for (let i = 0; i < targetPath.length; i++) {
    const currentPath = targetPath.slice(0, i + 1); // 当前展开路径
    expandedClassify.value = currentPath; // 设置当前展开路径
    await new Promise((resolve) => setTimeout(resolve, 1000)); // 等待当前节点加载完成
  }
}

看团队后续是否会把这个逻辑直接添加到组件中。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants