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>
目录
相关文章
|
2月前
|
JavaScript 前端开发
详细解读checkbox的全选与反选
详细解读checkbox的全选与反选
16 0
|
3月前
|
移动开发 JavaScript 小程序
uView Radio 单选框
uView Radio 单选框
135 0
|
3月前
|
移动开发 JavaScript 小程序
uView Checkbox 复选框
uView Checkbox 复选框
83 0
|
3月前
element-radio回显问题
element-radio回显问题
|
10月前
50zTree - 带 radio 的单选下拉菜单
50zTree - 带 radio 的单选下拉菜单
36 1
|
JavaScript 前端开发
一行jQuery代码搞定checkbox 全选和全不选
一行jQuery代码搞定checkbox 全选和全不选
input checkbox 复选框大小修改
有的时候,需要使用复选框,但是复选框有时候默认的太小,这时候就需要加大复选框。 解决方法: 其实就是zoom属性,这个是放大的意思,可以设置为180%,这样就会比之前大很多。
1425 0
|
前端开发
Bootstrap系列 -- 17. 复选框checkbox和单选择按钮radio
  Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题)。
1263 0
自定义Checkbox和Radiobox
在线演示 本地下载
878 0
input[type="radio"]自定义样式
input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式。怎么做呢?其实很简单,只要抓住3点。分别是1.label 2.隐藏自带样式 3.绘制我们的样式。
1171 0