Vue Flow中如何获取框选拖拽选中的节点ID列表？

方法一：通过selection-end事件结合Vue Flow实例获取 #

selection-end事件本身不会直接返回选中节点数据，但你可以借助Vue Flow的实例来获取当前选中的节点集合：

<template>
  <VueFlow ref="vueFlowRef" @selection-end="handleSelectionEnd">
    <!-- 节点与边的定义 -->
  </VueFlow>
</template>

<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

const vueFlowRef = ref(null)

const handleSelectionEnd = () => {
  // 通过实例方法获取选中节点数组
  const selectedNodes = vueFlowRef.value.getSelectedNodes()
  // 提取节点ID列表
  const selectedIds = selectedNodes.map(node => node.id)
  console.log('选中的节点ID:', selectedIds)
}
</script>

方法二：使用selection-change事件（更实时） #

如果需要在选中状态发生变化时立即获取结果，selection-change事件更适用，它会直接传递包含选中节点的参数：

<template>
  <VueFlow @selection-change="handleSelectionChange">
    <!-- 节点与边的定义 -->
  </VueFlow>
</template>

<script setup>
import { VueFlow } from '@vue-flow/core'

const handleSelectionChange = ({ nodes }) => {
  // nodes参数即为当前选中的节点数组，直接提取ID
  const selectedIds = nodes.map(node => node.id)
  console.log('选中的节点ID:', selectedIds)
}
</script>

关于selection-drag-end事件的说明 #

这个事件的作用是监听选框拖拽的结束动作，它传递的是选框的位置尺寸信息（比如{ top, left, width, height }），并不包含选中的节点数据，所以无法通过它直接获取节点ID，这也是你尝试后未成功的原因。

内容的提问来源于stack exchange，提问作者SiliconValley