wsfe / vue-tree

使用虚拟列表优化的 Vue 树组件 Vue tree component optimized using virtual list
https://wsfe.github.io/vue-tree/
MIT License
196 stars 38 forks source link

怎么只更新某一个节点的样式? #61

Closed xtuer closed 3 months ago

xtuer commented 1 year ago

使用 setData() 的方式设置树的数据 (使用非响应式):

  1. 节点 node 当前是非叶子节点,其 node.isLeaf 为 false,有小三角形箭头。
  2. 手动修改 node.isLeaf = true 把节点修改为叶子节点,节点的样式没有变,即小三角形箭头还在。
  3. 调用树的方法 tree.value.clearChecked() 强制更新整棵树,这时 node 的小三角形箭头消失。

有没有更好的方法,只更新某个节点的样式?

ChuChencheng commented 1 year ago

如果你要把非叶子节点变成叶子节点,把它底下的所有子节点都删除可以吗,调用 remove 方法 或者在数据中把子节点都去掉,重新 setData 试试

xtuer commented 1 year ago

如果你要把非叶子节点变成叶子节点,把它底下的所有子节点都删除可以吗,调用 remove 方法 或者在数据中把子节点都去掉,重新 setData 试试

谢谢回复,其实这只是一个例子,因为还有不少情况需要更新某个指定节点的样式,例如修改某个属性值,节点的样式要更新。

xtuer commented 8 months ago

节点数据变化了,调用 tree.value.clearChecked() 强制更新节点样式。

^3.1.0 的时候 tree.value.clearChecked() 这个方法还能勉强实现这个功能,但是 ^3.2.0 后这个功能失效了。

问题: 有没有办法在修改节点的数据 node.title = 'foo' 后,更新这个节点呢?

ChuChencheng commented 3 months ago

https://wsfe.github.io/vue-tree/examples/node-manipulation.html#update-node-title