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>
注意: 错误定义数据导致反选不上
// 错误示例
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>
目录
相关文章
|
JavaScript
面试官:v-model原理?
面试官:v-model原理?
757 2
|
SQL 前端开发 流计算
flink写入数据到hudi的四种方式
本文描述flink写入数据到hudi的四种方式
|
7月前
|
安全 数据安全/隐私保护
2026最新企业用户注册阿里云账号全流程指南:需要材料、操作步骤及问题解答FAQ
企业注册阿里云账号需手机号接收验证码,注册后完成实名认证方可使用。本文详解2026年最新企业账号注册全流程,包括材料准备、图文操作步骤,并提供支付宝快速认证方法及常见问题解答,助力企业高效上云。
1507 1
|
资源调度 jenkins 持续交付
jenkins 自动安装nodejs16.16.0版本报错处理
jenkins 自动安装nodejs16.16.0版本报错处理
1410 0
|
缓存 Java Spring
IDEA中配置HTML和Thymeleaf热部署的步骤
以上就是在IntelliJ IDEA中配置HTML和Thymeleaf热部署的步骤。这样的配置可以大大提高你的开发效率,让你更专注于代码的编写,而不是等待应用的重启。希望这个指南对你有所帮助!
1148 21
|
Java Maven
Maven配置仓储和配置国内镜像
Maven配置仓储和配置国内镜像
3784 0
|
JavaScript
Vue中 引入使用 vue-splitpane 实现窗格的拆分、调节
Vue中 引入使用 vue-splitpane 实现窗格的拆分、调节
3083 0
Vue中 引入使用 vue-splitpane 实现窗格的拆分、调节
|
前端开发
el-form-item label中的字体样式设置格式
这篇文章介绍了如何在Element UI的`el-form-item`组件中自定义`label`标签的样式,通过使用`slot`属性和内联CSS来改变字体颜色和加粗显示。
el-form-item label中的字体样式设置格式
|
JavaScript C++
以 Vue 3 项目为例,你是否经常遇到 import 语句顺序混乱的问题?要想解决它其实很容易!
以 Vue 3 项目为例,你是否经常遇到 import 语句顺序混乱的问题?要想解决它其实很容易!
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
684 0