JeecgBoot项目Online表单开发中排序字段导致数据重复问题解析
项目地址: https://gitcode.com/jeecgboot/JeecgBoot 问题现象
在JeecgBoot 3.7.3版本的Online表单开发功能中，当配置了多个字段排序后，用户在实际使用过程中发现了一个异常现象：点击排序字段时，前端页面会不断刷新出重复的数据条目。例如，数据库实际只有5条记录，但多次点击排序后，页面可能显示10条、15条甚至更多数据，而实际上后端接口始终只返回正确的5条数据。
问题本质
经过深入分析，这个问题与数据表的主键设计有直接关系。当数据表中存在id字段但该字段不是主键，且id值存在重复时，排序操作就会导致前端显示重复数据。这是因为：
- 前端表格组件在排序时依赖唯一标识来跟踪数据项
- 当id字段不是主键且存在重复值时，前端无法正确识别数据项的唯一性
- 每次排序操作都会导致前端重新渲染数据，而重复的id使得组件误认为是新数据
解决方案
在线开发模式下的修复
JeecgBoot团队已经在后续版本中修复了这个问题。主要改进包括：
- 加强了数据唯一性校验
- 优化了前端表格组件的渲染逻辑
- 确保即使id字段不是主键也能正确处理排序
生成代码后的自定义修改
对于已经生成代码的项目，开发者可以采取以下两种方案之一进行修复：
方案一：修改全局表格组件逻辑
- 定位到表格组件的渲染逻辑部分
- 修改数据加载方式，确保每次排序时清空原有数据
- 使用Vue的nextTick机制确保数据正确更新
dataSource.value = [];
nextTick(() => {
dataSource.value = result.records;
});
方案二：自定义业务请求处理
- 在业务代码中自定义数据请求逻辑
- 手动控制数据加载和渲染过程
- 添加额外的数据去重处理
最佳实践建议
- 主键设计规范：建议所有数据表都设置明确的主键字段，避免使用重复值作为标识
- Online开发使用：在Online表单开发中，尽量使用系统默认的id主键设计
- 代码生成后检查：生成代码后应检查表格渲染逻辑，特别是涉及排序、分页等复杂操作时
- 数据一致性验证：在前端添加数据去重逻辑，作为额外的保护措施
技术原理深入
这个问题的本质是前端表格组件的"key"管理机制。在Vue等现代前端框架中，列表渲染依赖于每个项的独特key值来进行高效的DOM更新。当排序操作触发时：
- 框架会尝试根据key值识别哪些项是新增的、哪些是移动的
- 如果key值重复，框架会错误地认为需要创建新DOM节点而非移动现有节点
- 这导致了视觉上的"数据重复"现象，实际上DOM节点被错误地复制了
理解这一原理后，开发者就能更好地处理类似的数据显示问题，不仅限于JeecgBoot项目，在其他前端开发场景中也能应用相同的解决思路。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
