Ant Radio反选、回显问题(Radio和RadioGroup)

简介: 组件库

总结下个低级问题,关于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>
AI 代码解读
注意: 错误定义数据导致反选不上
// 错误示例
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 },
    ]
AI 代码解读

方法二:RadioGroup

其实还有另一种简单写法,如果对样式没有需求的话

<a-form-item label="消息发送类型" name="idCategory">
      <a-radio-group v-model:value="formState.idCategory" :options="checkOptions">
      </a-radio-group>
    </a-form-item>
AI 代码解读

方法三: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>
AI 代码解读
XinMo
+关注
目录
打赏
0
0
0
0
145
分享
相关文章
ant design pro 面包屑和多标签页
ant design pro 面包屑和多标签页
665 0
vue3+ant design vue 自定义文件上传和自定义上传进度条
1.关键点是Upload组件中customRequest的API,它能通过覆盖默认的上传行为,可以自定义自己的上传实现(具体可看官方文档); 2.通过在Upload组件中绑定progress实现。 下面是详细代码
2904 0
layui给radio添加checked属性不起作用
layui给radio添加checked属性不起作用
230 0
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
662 1
curl 使用及调用url时带有&符号被截断解决
curl 使用及调用url时带有&符号被截断解决
714 0
解决报错TypeError: Converting circular structure to JSON --> starting at object with constructor
解决报错TypeError: Converting circular structure to JSON --> starting at object with constructor
无缝融入,即刻智能[二]:Dify-LLM平台(聊天智能助手、AI工作流)快速使用指南,42K+星标见证专属智能方案
【8月更文挑战第8天】无缝融入,即刻智能[二]:Dify-LLM平台(聊天智能助手、AI工作流)快速使用指南,42K+星标见证专属智能方案
无缝融入,即刻智能[二]:Dify-LLM平台(聊天智能助手、AI工作流)快速使用指南,42K+星标见证专属智能方案
Docker安装及镜像源修改
本文介绍了Docker的安装过程和如何修改Docker镜像源以加速下载。包括更新系统包、安装所需软件包、设置yum源、安装Docker以及验证安装是否成功。接着,提供了修改Docker镜像源的步骤,包括创建配置文件、编辑配置文件以设置镜像加速地址,并提供了几个常用的国内镜像源地址。最后,通过重启Docker服务和检查配置是否生效来完成镜像源的修改。
Docker安装及镜像源修改
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等