Tencent / tdesign-vue-next

A Vue3.x UI components lib for TDesign.
https://tdesign.tencent.com/vue-next
MIT License
1.35k stars 445 forks source link

[t-tree] tree组件重新赋值触发异常动画 #4325

Open 972890694 opened 1 week ago

972890694 commented 1 week ago

tdesign-vue-next 版本

1.9.6

重现链接

https://stackblitz.com/edit/xztwpp?file=package.json,src%2Fdemo.vue

重现步骤

t-tree组件data重新赋值

期望结果

组件重新渲染数据

实际结果

组件重新渲染数据,触发异常动画

框架版本

3.3.9

浏览器版本

No response

系统版本

No response

Node版本

v18.20.3

补充说明

No response

github-actions[bot] commented 1 week ago

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

1379255913 commented 1 week ago

看起来是因为transition group内的列表的key都是生成的唯一的nodeUniqueId,导致每次发生改变时都会重新生成,使动画效果每次会先删除老的节点,然后生成新的节点,造成异常动画,感觉需要给tree组件的TreeOptionData添加每个树节点添加唯一标识的属性key才能进行解决,然而目前好像tdesign还不支持添加key