Ant Design Pro Components 中 DragSortTable 拖拽排序索引获取问题解析

问题背景

在使用 Ant Design Pro Components 的 DragSortTable 组件时，开发者期望通过 onDragSortEnd 回调函数获取拖拽排序前后的索引位置（beforeIndex 和 afterIndex），但实际使用中发现这些关键参数并未返回。

问题现象

根据文档描述，onDragSortEnd 回调应该返回包含三个参数的对象：

• beforeIndex: 拖拽前的元素索引
• afterIndex: 拖拽后的元素索引
• newDataSource: 排序后的新数据源

但在实际使用版本（2.6.10）中，开发者发现只返回了 newDataSource 参数，缺少了关键的索引信息。

解决方案

经过验证，该问题在较新版本（2.6.51）中已经修复。开发者可以通过以下步骤解决：

1. 升级 @ant-design/pro-components 到最新稳定版本（2.6.51 或更高）
2. 清除构建工具的缓存（如 Vite 的缓存）
3. 重新启动开发服务器

技术原理

DragSortTable 的拖拽排序功能基于 react-dnd 实现。在内部实现中，组件需要跟踪以下关键信息：

1. 拖拽源信息：记录被拖拽项的原始位置（beforeIndex）
2. 放置目标信息：计算拖拽项放置后的新位置（afterIndex）
3. 数据更新：根据拖拽结果生成新的数据源（newDataSource）

在早期版本中，可能存在参数传递不完整的问题，这通常是由于：

• 状态管理逻辑不完善
• 回调函数参数处理遗漏
• 版本间兼容性问题

最佳实践

为确保稳定使用 DragSortTable 的拖拽排序功能，建议：

1. 保持版本更新：定期检查并更新到最新稳定版本
2. 完整参数处理：即使当前只需要部分参数，也建议完整处理回调参数
3. 错误边界处理：对于可能缺失的参数提供默认值或错误处理

const handleDragSortEnd = ({ beforeIndex = -1, afterIndex = -1, newDataSource = [] }) => {
  console.log('排序前索引:', beforeIndex);
  console.log('排序后索引:', afterIndex);
  // 使用 newDataSource 更新状态
};

总结

Ant Design Pro Components 作为企业级中后台解决方案，其组件库在不断迭代完善中。遇到类似 API 参数缺失问题时，首先应检查版本是否最新，其次可查阅更新日志或社区讨论。本例中的 DragSortTable 索引参数问题通过简单升级即可解决，体现了保持依赖更新的重要性。