点击showBom后拖拽数据至FullCalendar出现批量重复添加问题排查

DevOps 小满

2026-7-19

问题根因分析

核心原因：拖拽事件重复绑定

每次调用showBom(index)获取并渲染BOM表格时，重复给表格行添加了拖拽监听事件，且未在重新渲染前清除旧的监听逻辑。

首次点击showBom：表格渲染后，给行绑定1次「拖拽触发添加日历」的逻辑；
第二次点击showBom：新表格渲染时，未移除之前的监听，再次给行绑定第2次相同逻辑；
以此类推，点击N次后，拖拽一行会触发N次添加逻辑，最终导致N条重复数据被同步到日历。

常见代码场景佐证

这类问题通常出现在以下两种写法中：

在showBom方法内直接绑定拖拽事件，未做去重处理：

showBom(index) {
  // 获取BOM数据
  this.bomData = await fetchBomData(index)
  // 每次调用都新增监听，未清除旧监听
  this.$nextTick(() => {
    document.querySelectorAll('.bom-table-row').forEach(row => {
      row.addEventListener('dragend', this.handleDragToCalendar)
    })
  })
}

使用第三方拖拽库时，未销毁旧实例就重复初始化：

showBom(index) {
  this.bomData = await fetchBomData(index)
  this.$nextTick(() => {
    // 未销毁之前的Sortable实例，直接创建新实例导致多监听叠加
    new Sortable(document.querySelector('.bom-table'), {
      onEnd: this.handleDragToCalendar
    })
  })
}