Vue3可媲美Element Plus Tree组件开发之append节点

在前面的章节，我们完成了可媲美Element Plus Tree组件的基本开发。通过实现各种计算属性，tree数据状态变化引起的视图更新被计算属性所接管了，无需我们再手动做各种遍历、查找以及手动监听操作，这样后续开发高级功能变得易如反掌啦！！

在这里插入图片描述

看下提供给用户的vitepress文档说明：

在这里插入图片描述

操作演示：

在这里插入图片描述

前面我们实现了几个计算属性：

index

节点在扁平化列表中的位置索引
length

父节点的所有子孙节点的长度
visibleLength

可见子孙节点的长度
lineLength

参照线的长度

这些计算属性在新增一个节点，尤其是子节点时都会被影响到，触发重新计算以保证前面实现的基本功能是完好的。而无需我们在实现新增节点时再去兼顾基础功能，这就是Vue3 composition api的计算属性的魅力，让复杂的功能变得简单，组件的开发者只需要把关注点放到影响计算属性变化的数据上即可，Life is so easy!

新增类型、接口

定义ts的类型和接口，注意给用户提供的接口一定要遵循“迪米特法则”。

在这里插入图片描述

核心插入逻辑

/**
 * 新增顶级节点
 * @param child 要新增的叶子节点
 * @param data 扁平化节点列表
 * @param treeData 结构化节点树
 * @param optionProps 组件配置选项
 */
export function appendTop(child: ILeafNode, data: IFlatTreeNode[], treeData: ITreeNode[], optionProps: OptionProps) {
   
  // 节点id命名逻辑：如果指定了就用用户指定的，否则按照列表长度生成
  child.id = child.id || 'id-' + (data.length + 1)
  // 从新增节点拷贝数据作为original child node
  const ocNode = {
    ...child }
  // 扁平化new child node
  const ncNode = {
   
    ...child,
    level: 1,
    isLeaf: