NG-ZORRO Transfer组件按钮状态异常问题解析

在NG-ZORRO Ant Design组件库的Transfer穿梭框组件中，开发人员发现了一个关于操作按钮状态的逻辑问题。本文将深入分析该问题的技术背景、产生原因以及解决方案。

问题现象

Transfer组件允许用户在左右两个列表之间移动数据项。当用户进行以下操作时会出现异常：

1. 左侧列表中包含已被禁用的选中项
2. 用户新选中一个可用的数据项
3. 随后取消选中该数据项

此时，虽然所有选中项都已被禁用，但"向右移动"按钮仍然保持可用状态，这与预期行为不符。

技术背景

Transfer组件内部维护着两个关键状态：

• 左侧列表的选中项集合
• 右侧列表的选中项集合

组件通过计算这些选中项的状态来决定操作按钮是否可用。核心逻辑在于判断当前是否有可移动的有效选中项。

问题根源

问题出在按钮状态的计算逻辑上。组件当前仅检查是否存在选中项，而没有充分考虑这些选中项的禁用状态。具体来说：

1. 当用户选中一个可用项时，按钮正确变为可用状态
2. 当用户取消选中该项后，组件没有重新评估剩余选中项的可用性
3. 即使所有剩余选中项都是禁用的，按钮仍然保持可用状态

解决方案

正确的实现应该：

1. 在每次选中状态变化时重新计算按钮状态
2. 不仅要检查是否有选中项，还要检查这些选中项是否全部被禁用
3. 只有当存在至少一个可用的选中项时，才启用操作按钮

最佳实践建议

在使用Transfer组件时，开发者应注意：

1. 明确区分数据项的禁用状态和选中状态
2. 对于复杂的业务场景，考虑自定义按钮状态的计算逻辑
3. 在数据项状态变化时，确保相关UI状态得到及时更新

该问题已在最新版本中得到修复，开发者只需升级到最新版即可获得正确的行为。对于需要保持旧版本的项目，可以通过自定义模板或继承组件的方式临时解决这个问题。