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>
目录
相关文章
|
7月前
layui给radio添加checked属性不起作用
layui给radio添加checked属性不起作用
147 0
|
JavaScript
Element el-radio 单选框详解
本文目录 1. 用途 2. 单选框 3. 单选框样式 4. 单选框组 4. 单选框组样式 5. 尺寸调节 6. 绑定值变化事件 7. 小结
1644 0
Element el-radio 单选框详解
|
26天前
|
前端开发 开发者
React 单选按钮 Radio Button 详解
本文介绍 React 中单选按钮的基础概念、基本用法、常见问题及进阶技巧,包括如何正确设置 `checked` 属性、确保 `name` 属性一致、处理 `onChange` 事件,以及动态生成单选按钮和使用受控组件等,通过代码示例详细解析,帮助开发者有效管理状态和优化用户交互。
67 32
|
8月前
|
移动开发 JavaScript 小程序
uView Radio 单选框
uView Radio 单选框
221 0
50zTree - 带 radio 的单选下拉菜单
50zTree - 带 radio 的单选下拉菜单
57 1
43zTree - checkbox / radio 共存
43zTree - checkbox / radio 共存
53 0
22zTree - Radio 勾选操作
22zTree - Radio 勾选操作
63 0
|
JavaScript
jquery 使用attr方法对checkBox进行全选和反选操作
一次点击按钮进行全选的时候,checkbox全部选中;再次点击的时候,checkbox取消选中。 第二次,第三次,之后再点击,没有效果,代码也执行。checkbox的checked属性也改变,但是checkbox就是没有 被选中。问题解决办法是把红色部分中的attr方法修改
141 0
|
前端开发
Bootstrap系列 -- 17. 复选框checkbox和单选择按钮radio
  Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题)。
1279 0