element-ui编辑表单中的el-radio无法选择

最新推荐文章于 2024-08-09 11:20:18 发布
最新推荐文章于 2024-08-09 11:20:18 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/correlate/article/details/108128622
版权

问题

修改页面，回显数据之后，当点击其他的radio时，勾选不了。

原因

:radio的值应该是string类型，如果后台返回的值是int类型，radio不会默认选中。

解决办法

前端接收到后端的值之后，对属性转化，设置为string。

this.ModuleInfo.rightType = uResponse.data.rightType.toString();

在这里插入图片描述

mitrichev86
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elenemt ui 单选框
qq_36010613的博客
11-12 672
radio 单选 由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。 <template> <el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</el-radio> </te...
element-ui中form表单详细使用方法
weixin_58230453的博客
12-11 993
Element UI 是一个基于 Vue.js 的框架，提供了丰富的表单组件，可以用于快速构建应用程序中的表单。在 Vue 组件中，可以使用 Element UI 的表单组件创建表单。Element UI 提供了表单验证功能，可以对输入的数据进行校验。在这个例子中，我们创建了一个包含用户名和密码的简单表单，并使用。在这个例子中，我们创建了一个名为 “性别” 的表单项目，使用。输入框添加了两个规则，一个是必填项，另一个是邮箱格式。组件构建了表单的各个部分。这些组件可以用于构建更复杂的表单。
el-radio 无法选中/切换？|选中后无法切换？|如何有效解决？
AnnGreen的博客
10-31 3270
在响应式对象上添加新的属性，使其成为响应式的。：用于强制组件重新渲染。一般使用这样就可以了。
el-radio-button设置默认选择无效问题
最新发布
supming1的专栏
08-09 366
进排查，发现value属性是2.6.0版本才支持的，项目的element plus版本比较旧，不支持。今天使用el-radio-button遇到一个坑，按照官网的方式，如下使用。设置了默认值为1，结果没有默认选中，输出val,发现是label的值。更新了版本也不保留个旧的文档，唉....，记录一下，做一下备忘。
vue中el-radio无法默认选中
qq_44971069的博客
01-15 1779
按若依生成的代码,reset方法中会把所有字段默认初始值为null,所以按element官方示例把初始值写在form中是不生效的。把默认值写在reset方法中,当打开页面时先执行这个方法,页面上不生效，默认什么都不选中。
el-radio无法默认选中，点击无反应问题
qingrunhao的博客
07-13 3200
【代码】el-radio无法默认选中，点击无反应问题。
el-radio 无法选中/切换？|选中后无法切换？
eueuehwhj_的博客
07-04 91
click.stop.native 以免自己忘记_____备注。
elsa:elsa（eleme simple admin）基于 element-ui 封装 el-form，el-table 等组件，用于快速开发后台管理页面
05-09
:high_voltage: elsa（eleme simple admin）基于 element-ui 封装 el-form，el-table 等组件，适用于快速开发后台管理项目。 用法示例，见： Quickstart npm i elsa-vue -S // vue main.js import Vue from 'vue' ...
element-ui本地编译后的js包
07-27
除了这些基础组件，Element UI 还提供了大量的其他组件和实用功能，如表单组件（Input、Select、Checkbox、Radio等）、导航组件（Menu、Breadcrumb、Pagination等）以及弹窗组件（Popover、Tooltip等）。这些组件都...
elementUi vue el-radio 监听选中变化的实例代码
10-16
其中，el-radio 单选按钮组件允许用户从一组选项中选择一个。 在本篇文章中，将介绍如何在 Vue 项目中使用 ElementUI 的 el-radio 组件，并通过实例代码展示如何监听单选按钮组中选项的变化。同时，文章还涉及了...
2021-11-21 vue笔记-PC端框架:Element-UI组件库(二) element-ui常用组件的介绍和使用
GAARA
11-21 795
零.回顾 一.基本组件 0.有哪些基本组件? 1.layout布局:通过基础的 24 分栏，迅速简便地创建布局 有哪些布局? 示例:使用row组件和col组件+span进行基础布局 2.container布局容器:用于快速布局的容器组件,用户按需求复制相关网页结构的代码 容器组件的基本结构 常见页面布局 第一种 第二种 第三种 第四种(常用) 第五种 示例:使用第四种布局 二.表单组件 1.有哪些表单组件? 2.form表单:有输入框,选择器,单选框,多选框等控件组成,用以手机,校验,提交数据 有哪些表单?
Element-ui修改页面中el-radio无法选择
weixin_43100952的博客
03-19 4243
项目场景： 后台框架使用：SpringBoot 前框框架使用：Vue.js + Element-ui 问题描述 使用Element-ui框架修改页面中的 el-radio 无法选择 后端视图实体字段定义示例如下： // 0停用 1启用 private int status; 前端页面代码示例如下： <el-radio v-model="radio" label="2">启用</el-radio> 原因分析： el-radio 的值是string类型，如果后台
＜el-radio＞无法选中问题
m0_60428941的博客
12-15 1393
<el-radio>无法选中问题
在使用element-ui中的el-radio-group 赋值后 无法选中问题
m0_70871712的博客
07-19 6449
给表单赋值，遇到了赋值成功，但单选框不会自动选中的问题。
el—radio不能选中和点击没反应的解决
weixin_45695485的博客
12-16 8517
环境:vue2 在el-radio中，要注意lable绑定的是哪个，是在data中的sex或者是ruleForm.sex
element-ui的el-radio标签默认值不选中的原因
qq_42724424的博客
05-08 6770
1.原因 通常后台返回的数字都是Number类型，而直接使用label属性绑定的数据是字符串类型，所以默认不选中。 2.解决办法 在label前加：，使用动态绑定数据的方法，即可将1和0当做数字。（浅谈下标签用法：v-model绑定的status和label关联，status=1时，展示的radio项是label为1的项） <template> <div> <el-radio-group v-model="status" @change="valChange"&gt
element UI单选框无法自动选中，编辑table 无法根据绑定值自动选中radio
weixin_44384987的博客
09-17 836
el-radio-group 组 使用el-raido-group 绑定表单元素，点击编辑的时候发现radio 无法根据绑定值动态渲染，找了很久才发现是因为数据的类型问题，下面是我的el-radio-group 的代码 <el-form-item label="状态" class="showRed" prop="status"> <el-radio-group v-model="form.status"> <el-radio :label =
【ElementUI】【Vue】el-Radio失效，无法切换选中效果
热门推荐
陶洲川的博客
02-26 1万+
一、问题 1.1、环境 电脑环境：Windows 10； 开发工具：IntelliJ IDEA； 数据库环境：Redis 3.2.100 JDK环境: Jdk1.8； 1.2、问题 【Vue】【ElementUI】为什么使用el-radio 标签失效？ 使用el-radio标签，点击图中的【审核不通过】圆形单点框，没有反应，还是默认选中【审核通过】。 二、解答 1、这里有个坑，就是ElementUI和Vue.js框架配合使用的时候，不支持连点。 错误方法： //3 审核 reviewSys
vue使用element-ui的表单男女选择
06-10
你可以使用element-ui中的ElRadio和ElFormItem组件来实现男女选择表单。以下是一个示例代码： ``` <template> <el-form :model="form" ref="form" label-width="100px"> <el-form-item label="性别"> <el-radio-group v-model="form.gender"> <el-radio label="male">男</el-radio> <el-radio label="female">女</el-radio> </el-radio-group> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { gender: '' // 默认为空 } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log(this.form) // 在这里可以将表单数据提交到后端 } else { console.log('表单验证失败!') return false } }) } } } </script> ``` 在上面的示例中，使用了ElRadio和ElFormItem组件来实现男女选择表单，v-model指令绑定了form对象中的gender属性，用来记录用户选择的值。当用户选择男或女时，gender属性就会被相应地赋值为'male'或'female'。表单提交时，可以将form对象提交到后端进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值