序
总结下个低级问题,关于Radio的反显问题,一般存在于修改单条表格数据时,跳出弹框出现Radio未被选中
方法一:Radio循环
<a-form-item label="消息发送类型" name="idCategory">
<a-radio-group v-model:value="formState.idCategory">
<a-radio
v-for="itemCheck in checkOptions"
:key="itemCheck.value"
:value="itemCheck.value"
style="line-height: 32px"
>
{{itemCheck.label}}
</a-radio>
</a-radio-group>
</a-form-item>
注意: 错误定义数据导致反选不上
// 错误示例
checkOptions = [
{ label: '短信', value: '10' },
{ label: '邮件', value: '20' },
{ label: '企业微信', value: '30' },
{ label: '飞书', value: '40' },
]
// 正确
checkOptions = [
{ label: '短信', value: 10 },
{ label: '邮件', value: 20 },
{ label: '企业微信', value: 30 },
{ label: '飞书', value: 40 },
]
方法二:RadioGroup
其实还有另一种简单写法,如果对样式没有需求的话
<a-form-item label="消息发送类型" name="idCategory">
<a-radio-group v-model:value="formState.idCategory" :options="checkOptions">
</a-radio-group>
</a-form-item>
方法三:Radio
注意: Radio的value没有绑定属性会导致反显不上
<!-- 错误示例 -->
<a-form-item label="消息发送类型" name="idCategory">
<a-radio-group v-model:value="formState.idCategory">
<a-radio value="10">短信</a-radio>
<a-radio value="20">邮件</a-radio>
<a-radio value="30">企业微信</a-radio>
<a-radio value="40">飞书</a-radio>
</a-radio-group>
</a-form-item>
<!-- 正确 -->
<a-form-item label="消息发送类型" name="idCategory">
<a-radio-group v-model:value="formState.idCategory">
<a-radio :value="10">短信</a-radio>
<a-radio :value="20">邮件</a-radio>
<a-radio :value="30">企业微信</a-radio>
<a-radio :value="40">飞书</a-radio>
</a-radio-group>
</a-form-item>