web技术分享| 虚拟 tree

查了好久，觉得使用 Ant Design Vue 中的 Tree 树形控件
因项目需求，节点的移动不通过拖拽移动，需要通过弹窗实现节点的移动，因此基于添加、删除实现。
当前仅使用节点添加、删除、移动(删除+添加)以及懒加载。

开发中移动时注意懒加载的值，否则移动后，已经展开的节点无法正常展开

使用 Tree

tree 引入

使用 Ant Design Vue 中的 Tree 树形控件 引入 Tree

• 具体引入方式查看 Ant Design Vue 文档

组件使用

template

• expandedKeys 展开指定的树节点

• loadedKeys 已经加载的节点，需要配合 loadData 使用(控制是否进行懒加载，移动(删除+添加)所需):保存 key 表示该节点已进行懒加载(如果删除该节点将会重新懒加载)

• height 固定高度，虚拟滚动

相关代码：

  <a-tree
          v-model:expandedKeys="MonitorArea.expandedKeys"
          v-model:loadedKeys="MonitorArea.loadedKeys"
          :height="510"