Carbon Components Svelte 数据表格单选按钮联动问题解析

在 Carbon Components Svelte 项目中，开发者发现了一个关于数据表格(DataTable)单选按钮的交互问题。当页面中存在多个数据表格组件时，如果在不同表格中选择相同ID的行，会导致先前选择的单选按钮被意外取消选中。

问题现象

该问题表现为：当页面中存在两个使用单选按钮选择行的数据表格时，如果在第一个表格中选择某行后，又在第二个表格中选择相同ID的行，第一个表格中已选中的单选按钮会被自动取消选中。

技术分析

问题的根源在于数据表格组件中单选按钮的name属性处理方式。在原始实现中，当设置radio={true}时，组件直接将行的ID作为单选按钮的name属性值。这导致不同表格中相同ID的单选按钮被浏览器视为同一组单选按钮，从而触发了单选按钮的互斥行为。

正确的实现应该是：

1. 为每个数据表格分配唯一的name属性前缀
2. 将行的ID作为单选按钮的value属性
3. 确保不同表格的单选按钮属于不同的命名组

解决方案

项目维护者通过以下方式修复了该问题：

1. 修改数据表格组件，使其能够接受自定义的name属性
2. 确保单选按钮的name属性与表格实例相关联，而不是直接使用行ID
3. 保持value属性使用行ID，以维持原有的选择逻辑

影响范围

该问题影响所有使用多个数据表格且使用相同行ID的场景。特别是在以下情况下会出现：

• 页面中包含多个数据表格实例
• 表格使用单选按钮进行行选择
• 不同表格中存在相同ID的行记录

临时解决方案

在修复版本发布前，开发者可以采用以下临时解决方案：

1. 确保不同表格使用不同的ID命名空间
2. 避免在不同表格间重复使用相同的行ID
3. 使用复选框代替单选按钮（如果不严格要求单选）

最佳实践

为避免类似问题，建议开发者在实现类似功能时：

1. 为可交互元素设计独立的命名空间
2. 理解HTML表单元素的默认行为（如单选按钮的互斥特性）
3. 在组件设计时考虑多实例共存的情况
4. 为可配置属性（如name）提供合理的默认值和自定义选项

该修复已包含在项目的0.87.1版本中，建议受影响的用户升级到此版本或更高版本。