el-tree组件的那些事（3）：点击和拖拽相关方法剖析

前言

在上一篇文章中，我们对el-tree树组件中的基本结构和基础方法进行了分析。在本文中，我们将继续深入探讨tree-node.vue和tree.vue中的方法，重点关注节点点击和拖拽相关方法的实现细节。通过对这些方法的剖析，您将对el-tree树组件的交互功能有更深入的了解，并能够更好地掌握其使用技巧。

tree-node.vue中的方法

handleClick

handleClick方法是处理节点点击事件的核心方法之一。该方法首先判断当前节点是否处于禁用状态。如果禁用，则直接返回，不执行任何操作。

handleClick(e) {
  if (this.disabled) return;
  ...
}

接下来，该方法将触发el-tree树组件的节点点击事件，并传递当前节点的信息作为参数。

this.$emit('click', this.node, e);

同时，该方法还将处理节点的展开和折叠操作。如果当前节点处于折叠状态，则展开节点；如果处于展开状态，则折叠节点。

if (this.isLeaf) {
  this.handleClickLeaf(e);
} else if (this.expandable) {
  this.handleExpandIconClick(e);
}

handleClickLeaf

handleClickLeaf方法是处理叶子节点点击事件的具体实现。该方法将触发el-tree树组件的叶子节点点击事件，并传递当前节点的信息作为参数。

handleClickLeaf(e) {
  this.$emit('leaf-click', this.node, e);
}

handleExpandIconClick

handleExpandIconClick方法是处理展开图标点击事件的具体实现。该方法首先判断当前节点是否处于展开状态。如果处于展开状态，则调用collapse方法折叠节点；如果处于折叠状态，则调用expand方法展开节点。

handleExpandIconClick(e) {
  if (this.expanded) {
    this.collapse();
  } else {
    this.expand();
  }
}

collapse

collapse方法是折叠节点的具体实现。该方法首先判断当前节点是否处于折叠状态。如果处于折叠状态，则直接返回，不执行任何操作。

collapse() {
  if (this.expanded) {
    ...
  }
}

接下来，该方法将触发el-tree树组件的节点折叠事件，并传递当前节点的信息作为参数。

this.$emit('collapse', this.node);

同时，该方法还将更新当前节点的展开状态，并收起子节点。

this.expanded = false;
this.childNodeRefs.forEach((childNodeRef) => {
  childNodeRef.collapse();
});

expand

expand方法是展开节点的具体实现。该方法首先判断当前节点是否处于展开状态。如果处于展开状态，则直接返回，不执行任何操作。

expand() {
  if (this.expanded) {
    return;
  }
  ...
}

接下来，该方法将触发el-tree树组件的节点展开事件，并传递当前节点的信息作为参数。

this.$emit('expand', this.node);

同时，该方法还将更新当前节点的展开状态，并展开子节点。

this.expanded = true;
this.childNodeRefs.forEach((childNodeRef) => {
  childNodeRef.expand();
});

tree.vue中的方法

handleNodeClick

handleNodeClick方法是处理节点点击事件的总入口。该方法首先判断当前点击的节点是否处于禁用状态。如果禁用，则直接返回，不执行任何操作。

handleNodeClick(node, e) {
  if (node.disabled) return;
  ...
}

接下来，该方法将判断当前点击的节点是否为叶子节点。如果是叶子节点，则触发叶子节点点击事件；如果不是叶子节点，则触发普通节点点击事件。

if (node.isLeaf) {
  this.$emit('leaf-click', node, e);
} else {
  this.$emit('node-click', node, e);
}

同时，该方法还将调用节点点击方法，处理节点的展开和折叠操作。

node.handleClick(e);

handleNodeExpand

handleNodeExpand方法是处理节点展开事件的具体实现。该方法首先判断当前节点是否处于折叠状态。如果处于折叠状态，则调用expand方法展开节点；如果处于展开状态，则调用collapse方法折叠节点。

handleNodeExpand(node, e) {
  if (node.collapsed) {
    this.handleNodeExpandIconClick(node, e);
  } else {
    this.handleNodeCollapseIconClick(node, e);
  }
}

handleNodeExpandIconClick

handleNodeExpandIconClick方法是处理展开图标点击事件的具体实现。该方法首先判断当前节点是否处于折叠状态。如果处于折叠状态，则调用expand方法展开节点；如果处于展开状态，则调用collapse方法折叠节点。

handleNodeExpandIconClick(node, e) {
  node.expandIconClick(e);
}

handleNodeCollapseIconClick

handleNodeCollapseIconClick方法是处理折叠图标点击事件的具体实现。该方法首先判断当前节点是否处于展开状态。如果处于展开状态，则调用collapse方法折叠节点；如果处于折叠状态，则调用expand方法展开节点。

handleNodeCollapseIconClick(node, e) {
  node.collapseIconClick(e);
}

总结

在本文中，我们深入剖析了el-tree树组件中tree-node.vue和tree.vue中的方法，重点关注了节点点击和拖拽相关方法的实现细节。通过对这些方法的分析，我们对el-tree树组件的交互功能有了更深入的理解，并能够更好地掌握其使用技巧。在下一篇