Vue 3 中怎么在树形组件中监听节点展开与折叠的点击事件-Vue.js-PHP中文网

vue 3树形组件监听节点展开/折叠应响应展开状态变化而非点击事件：element plus用@node-expand/@node-collapse，ant design vue用@onexpand，自定义组件通过v-model:expanded或emit更新。

vue 3 中怎么在树形组件中监听节点展开与折叠的点击事件

在 Vue 3 的树形组件中监听节点展开/折叠动作，关键不是监听“点击事件”本身，而是响应节点展开状态的变化。不同组件库实现方式略有差异，但核心逻辑一致：通过响应式属性控制展开，并在变化时触发回调。

Element Plus el-tree：用 @node-expand 和 @node-collapse

Element Plus 的 el-tree 提供了专用事件，无需手动绑定 click，直接监听状态变更即可：

@node-expand：节点被展开时触发，参数为当前节点数据、节点对象、DOM 事件
@node-collapse：节点被折叠时触发，参数同上
注意：这两个事件仅对有子节点（children 存在且非空）的父节点生效

示例代码：

<el-tree :data="treeData" :props="defaultProps"></el-tree>

脚本部分：

const handleNodeExpand = (data, node, event) => {
  console.log('展开节点：', data.label)
}
const handleNodeCollapse = (data, node, event) => {
  console.log('折叠节点：', data.label)
}

自定义递归树组件：用 v-model:expanded 或 emit 更新

若使用手写或轻量树组件（如基于 v-for 递归的 TreeNode），通常通过 props 传入节点的 expanded 状态，并由子组件通知父组件更新：

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

父组件维护一个 expandedKeys Set 或 Map 记录哪些节点已展开
子组件点击展开按钮时，调用 emit('update:expanded', { id: node.id, expanded: !current })
父组件监听该事件，同步更新本地状态，从而触发重新渲染

常见结构示意：

<treenode v-for="child in node.children" :key="child.id" :node="child" :expanded="expandedKeys.has(child.id)"></treenode>

Ant Design Vue Tree：监听 onExpand

Ant Design Vue 的 a-tree 使用 onExpand 事件，它在节点展开/折叠时统一触发，第二个参数包含 expanded 布尔值：

<a-tree :tree-data="treeData"></a-tree>

处理函数需判断状态：

const handleOnExpand = (keys, { expanded, node }) => {
  if (expanded) {
    console.log('节点展开：', node.title)
  } else {
    console.log('节点折叠：', node.title)
  }
}