Vue3可媲美Element Plus Tree组件实战之移除节点

Element Plus Tree自定义节点内容示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。

因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。

用法示例

看下使用示例

直接操作插槽传入的操作对象的remove方法即可。传入一个回调函数，该回调函数接收一个只读的IFlatTreeNode类型，仅包含id、isLeaf和level属性，而其他属性和方法对用户屏蔽，严格遵循迪米特设计原则！

再看回调函数：

这里咱们给用户提供了灵活的promise编程风格，因为考虑到是否删除的逻辑，可能需要关联一些数据进行远程的校验，比如查库，所以这种情况下用promise再好不过咯！

前端删除与后端删除

注意，这里提供的回调方法仅用于判断是否能删除，咱们并不在这个方法中做后台删除逻辑，然后通过resolve进行前端删除同步，这并不是我们的意图！！咱们这里仅考虑前端删除！将前端节点的变更同步到后台，咱们后面会进一步迭代JuanTree来实现这一需求噢~

下面是具体的实现。

操作接口定义

在扁平化节点类型IFlatTreeNode上新增一个节点移除方法的声明：

export interface IFlatTreeNode extends ITreeNode {
   
  ...
  // 内部删除方法
  remove: (flatData: IFlatTreeNode[], treeData: ITreeNode[]) => void
}

注意，这个方法是内部使用的，并不会暴露给用户。

给用户提供的接口如下：

// 给用户提供的回调接口，回调逻辑用户自行实现，
// 方法是同步的，注意返回值为Promise，看Promise的执行动作才决定是否要执行节点移除
export interface RemoveCall {
   
  (node: IFlatTreeNode):