SoybeanAdmin项目中NRadio默认选中问题的分析与解决

问题背景

在使用SoybeanAdmin项目开发过程中，开发者遇到了一个关于NRadio组件默认选中状态不生效的问题。具体表现为：虽然通过createDefaultModel方法设置了默认值，但NRadio组件并没有按照预期显示选中状态。

问题现象

在表单开发中，开发者定义了一个包含status字段的默认模型，其中status的默认值设置为字符串'1'。对应的前端代码使用了NaiveUI的NRadioGroup和NRadio组件来展示选项，但页面渲染后并没有自动选中对应的选项。

原因分析

经过深入排查，发现问题根源在于数据类型不一致导致的匹配失败。具体表现为：

1. 模型中的status字段被定义为字符串类型（'1'）
2. 而enableStatusOptions选项列表中的value值实际上是数字类型（1）

在JavaScript严格比较（===）中，字符串'1'和数字1被视为不同的值，因此无法匹配，导致NRadio组件无法正确显示选中状态。

解决方案

针对这个问题，有以下几种解决方案：

方案一：统一数据类型为字符串

将模型中的status字段和选项列表中的value值都统一为字符串类型：

// 模型定义
function createDefaultModel(): Model {
  return {
    status: '1' // 保持字符串
  };
}

// 选项转换
export function transformRecordToOption(record) {
  return Object.entries(record).map(([value, label]) => ({
    value: String(value), // 显式转换为字符串
    label
  }));
}

方案二：统一数据类型为数字

将模型中的status字段和选项列表中的value值都统一为数字类型：

// 模型定义
function createDefaultModel(): Model {
  return {
    status: 1 // 改为数字
  };
}

// 选项转换
export function transformRecordToOption(record) {
  return Object.entries(record).map(([value, label]) => ({
    value: Number(value), // 显式转换为数字
    label
  }));
}

方案三：使用类型转换函数

在数据绑定时进行类型转换，确保比较时类型一致：

<NRadioGroup v-model:value="String(model.status)">
  <NRadio v-for="item in enableStatusOptions" 
          :key="item.value" 
          :value="String(item.value)" 
          :label="$t(item.label)" />
</NRadioGroup>

最佳实践建议

1. 数据类型一致性：在前后端交互和组件使用时，确保相同字段的数据类型保持一致
2. 显式类型转换：在不确定数据类型时，使用String()、Number()等函数进行显式转换
3. 严格模式：推荐使用===进行比较，避免隐式类型转换带来的意外行为
4. 类型定义：在TypeScript项目中，明确定义接口类型，利用类型系统提前发现问题

总结

在SoybeanAdmin项目开发中，NRadio组件默认选中不生效的问题通常是由于数据类型不一致导致的。通过统一模型数据和选项值的数据类型，可以解决这类问题。开发者在处理表单数据时，应当特别注意数据类型的统一性，避免因类型不匹配导致的UI显示问题。