el-radio-button设置默认选择无效问题

最新推荐文章于 2025-06-24 13:58:12 发布

原创最新推荐文章于 2025-06-24 13:58:12 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

今天使用el-radio-button遇到一个坑，按照官网的方式，如下使用

<el-radio-group v-model="val">
      <el-radio-button label="男" value="1" />
      <el-radio-button label="女" value="2" />
</el-radio-group>

设置了默认值为1，结果没有默认选中，输出val,发现是label的值。

进排查，发现value属性是2.6.0版本才支持的，项目的element plus版本比较旧，不支持。

解决方法，应该采用旧版本写法，如下：

<el-radio-group v-model="val">
      <el-radio-button label="1">男</el-radio-button>
      <el-radio-button label="2">女</el-radio-button>
</el-radio-group>

更新了版本也不保留个旧的文档，唉....，记录一下，做一下备忘。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

supming1

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

若依 vue中el-radio无法默认选中

guochanof的专栏

08-30

2259

若依 vue中el-radio无法默认选中

组件Element中Radio和Select绑定值的属性区分

_夜渐凉

09-05

2718

Radio和Select需要区分以下的是：在Radio中：绑定的值是label接收的 <div class="row"> <div class="col-sm-6"> <el-form-item label="医生职称" prop="title"> <el-radio-

参与评论您还未登录，请先登录后发表或查看评论

工作总结7：自定义样式

歌谣的博客

10-18

380

<el-radio-group v-model="radio1"> <el-radio-button class="user-radio" label="上海"> <div class="user-radio-div">主标题</div> <p class="user-radio-p">说明文案</p> </el-radio-button> ...

vue中el-radio无法默认选中

qq_44971069的博客

01-15

2730

按若依生成的代码,reset方法中会把所有字段默认初始值为null,所以按element官方示例把初始值写在form中是不生效的。把默认值写在reset方法中,当打开页面时先执行这个方法,页面上不生效，默认什么都不选中。

el-radio无法默认选中，点击无反应问题

qingrunhao的博客

07-13

3968

【代码】el-radio无法默认选中，点击无反应问题。

关于vue element-ui Radio单选框默认值选不中的原因

CY_WINT的博客

02-01

1475

如图上，想要表单里的cardLifespan为0时默认选中非长期有效，为1时默认选中长期有效，但是我做的功能里涉及到了数据反显，上传图片后识别反显以及用户手动选择，这样出现的问题就是，手动选择和上传图片都ok，数据反显却无论如何都反显不上，查阅资料后发现是混用字符和数字问题。：label='0',绑定的label值为数字0，上传照片识别反显的数据通过打印也是数字类型，而数据反显接口打印出来的值是字符串，因此无法默认选中radio。将返回的数据进行处理，将3个位置的值统一数据类型，就可以成功选中了。

el-radio 无法切换(element 单选框无法切换)

qq_17627195的博客

09-16

4114

问题：当多层嵌套的时候，点击切换多选的时候，值是切换更新了，但是el-radio无法切换，页面不渲染更新。解决方案：@change="$forceUpdate()" <el-radio-group v-model="test" @change="$forceUpdate()"> <el-radio :label="1">是</el-radio> <el-radio :label="0">否</el-radio> <el-r

el-radio-group fill无效

01-12

当尝试通过设置 `fill` 属性来改变 Element UI 的 `el-radio-button` 组件的颜色时，如果发现样式并未按预期更改，这通常是因为默认样式的优先级较高或是其他 CSS 规则覆盖了自定义样式。为了确保 `fill` 属性能够...

在vue2中：<el-form label-position="right" label-width="80px" size="small" :model="form" style="padding: 0px;" ref="numberValidateForm" :rules="rules"> <el-form-item label="用户名:" prop="name"> <el-input v-model="form.name" style="width: 200px;" name="name"></el-input> </el-form-item> <el-form-item label="用户id:"> <div>{{form.u_id}}</div> </el-form-item> <el-form-item label="手机号:" prop="phone"> <el-input v-model="form.phone" style="width: 250px;" name="phone"></el-input> </el-form-item> <el-form-item label="性别" prop="gender"> <el-radio-group v-model="form.gender"> <el-radio :label="1">男</el-radio> <el-radio :label="2">女</el-radio> <el-radio :label="3">保密</el-radio> </el-radio-group> </el-form-item> <el-form-item label="出生日期" prop="date"> <el-date-picker type="date" :picker-options="pickerOptionsStart" placeholder="选择日期" v-model="form.date" style="width: 200px;"></el-date-picker> </el-form-item> <el-form-item class="e-i-button"> <el-button @click="locationNone">取消</el-button> <el-button style="margin-left: 200px;" type="primary" @click.stop="areaSubmit('numberValidateForm')">修改</el-button> </el-form-item> </el-form> form: { name: '', date: '', u_id:'', gender: 3, phone: '' }, rules:{ phone: [ { required: false, trigger: 'change' }, { validator: checkMobile, trigger: 'change' }, ], name: [ { required: false, trigger: 'change' }, { validator: checkName, trigger: 'change' }, ] }, async Info(){ if(this.$store.state.user.userInfo){ this.userInfo=await this.$store.state.user.userInfo; if(this.userInfo.birthday!=null){ this.form.date=new Date(this.userInfo.birthday); } this.form.name=this.userInfo.name; this.form.phone=this.userInfo.phone; this.form.u_id=this.userInfo.u_id; if(this.userInfo.gender!=null){ this.form.gender=this.userInfo.gender; } this.avatarUrl='http://127.0.0.1:9090'+this.userInfo.picture.slice(8) return true; } },date可以输入，在注释掉赋值语句后可以均可正常输入，

03-27

Element UI的`el-date-picker`组件默认绑定的是字符串格式的日期值，直接绑定`Date`对象会导致： - 组件内部解析异常 - 输入时无法正确触发数据更新 - 双向绑定机制失效 2. **响应式更新限制** Vue2使用`Object...

父页面<el-radio v-model="item.likeBad" label="0" class="likeBtn" :class="`likeBtn-${item.funcId}-${user.billId}`" @click.native="clickBtn('likeBtn', item,'0')"><span style="margin-left: 17px;line-height: 22px;">好评</span></el-radio> <el-radio v-model="item.likeBad" label="1" class="normalBtn" :class="`normalBtn-${item.funcId}-${user.billId}`" @click.native.prevent="clickBtn('normalBtn', item,'1')"><span style="margin-left: 17px;line-height: 22px;">一般</span> </el-radio> <el-radio v-model="item.likeBad" label="2" class="badBtn" :class="`badBtn-${item.funcId}-${user.billId}`" @click.native.prevent="clickBtn('badBtn', item,'2')"><span style="margin-left: 17px;line-height: 22px;">差评</span> </el-radio>  <eval-dialog :visible.sync="dialogVisible[item.funcId]" :item="item" :good-reason="goodReason" :bad-reason="badReason" :submit-loading="submitLoading" @eval-change="handleEvalChange" @submit="submitBadReason" />子页面 <template> <el-dialog :visible="visible" @close="handleClose" custom-class="badBtnDetail"> <div style="border-bottom: 1px dashed #D9D9D9; height: 36px;"> <el-radio-group v-model="innerItem.likeBad" @change="handleEvalChange"> <el-radio label="0" class="likeBtn"> <span style="margin-left: 17px; line-height: 22px;">好评</span> </el-radio> <el-radio label="1" class="normalBtn"> <span style="margin-left: 17px; line-height: 22px;">一般</span> </el-radio> <el-radio label="2" class="badBtn"> <span style="margin-left: 17px; line-height: 22px;">差评</span> </el-radio> </el-radio-group> </div>  <div v-if="innerItem.likeBad !== '1'">  <el-checkbox-group v-model="innerItem.goodReasonList" v-if="innerItem.likeBad === '0'" > <el-checkbox v-for="(reason, index) in goodReason" :key="'good-'+index" :label="reason.para1" class="badReasonItem" /> </el-checkbox-group>  <el-checkbox-group v-model="innerItem.badReasonList" v-if="innerItem.likeBad === '2'" > <el-checkbox v-for="(reason, index) in badReason" :key="'bad-'+index" :label="reason.para1" class="badReasonItem" /> </el-checkbox-group>  <el-input v-if="showOtherInput" type="textarea" :rows="2" placeholder="请输入其他原因" v-model="innerItem.badReasonTxt" style="margin-top: 10px;" /> </div> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="handleSubmit" v-loading="submitLoading">提交</el-button> </span> </el-dialog> </template> <script> import { Button, Dialog, Input, Radio, RadioGroup, Checkbox, CheckboxGroup } from 'element-ui'; export default { name: 'EvalDialog', props: { visible: Boolean, item: Object, goodReason: Array, badReason: Array, submitLoading: Boolean }, components: { [Button.name]: Button, [Dialog.name]: Dialog, [Input.name]: Input, [Radio.name]: Radio, [RadioGroup.name]: RadioGroup, [Checkbox.name]: Checkbox, [CheckboxGroup.name]: CheckboxGroup, }, data() { return { innerVisible: this.visible, // 用内部变量存储 visible innerItem: { ...this.item } }; }, computed: { showOtherInput() { return this.innerItem.likeBad === '0' && this.innerItem.goodReasonList.includes('其他') || this.innerItem.likeBad === '2' && this.innerItem.badReasonList.includes('其他'); } }, methods: { handleEvalChange() { this.$emit('eval-change', this.innerItem); }, handleSubmit() { this.$emit('submit', this.innerItem); }, handleClose() { this.innerItem = { ...this.item }; // 重置内部状态 this.innerItem['visible'] = false; console.log('触发 input 事件'); this.innerVisible = false; // 修改内部变量而非 prop } }, watch: { visible(newVal) { this.innerVisible = newVal; // 父组件更新时同步到内部变量 }, innerVisible(newVal) { this.$emit('update:visible', newVal); // 内部变量变化时通知父组件 } } }; </script> 为什么子页面点关闭，关不了弹窗，为什么父页面默认选中单选时，再点击默认的单选不能弹窗，如何优化修改

07-10

在 Vue 项目中，尤其是使用 Element UI 或其升级版 Element Plus 时，`el-dialog` 组件的关闭无效或父子组件通信问题常常出现。以下是对这些问题的分析与优化方案。 ### 子页面关闭按钮无法关闭弹窗当 `el-dialog...

<template> <div> <h3>课程信息</h3> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label=""> 课程名称 <el-input v-model="form.courseName" style="width: 200px"></el-input> 课程时间 <el-date-picker v-model="startEndTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" > </el-date-picker> <el-button style="background-color: red; color: aliceblue" >搜索</el-button > </el-form-item> </el-form> <div id="box"> <div> <el-radio-group v-model="form.status" style="width: 300px; float: left"> <el-radio-button label="1">已预约</el-radio-button> <el-radio-button label="2">已结束</el-radio-button> </el-radio-group> </div> <ul> <li v-for="v in list" :key="v.id"> <div> <el-button @click="toCourseDetail(v.id)"> <img v-bind:src="v.pic" alt="" /> <h4>{{ v.courseName }}</h4> <p style="white-space: pre-wrap">{{ v.introduce }}</p> </el-button> </div> </li> </ul> </div> <div> <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center > <span slot="footer" class="dialog-footer"> <el-button @click="centerDialogVisible = false">取消</el-button> <el-button type="primary" @click="courseDetail">确定</el-button> </span> </el-dialog> </div>  <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="pageNum" @current-change="handlePageChange" ></el-pagination> </div> </template> <script> import { findAllUserCourse } from '@/api/user'; export default { data() { return { centerDialogVisible:false, startEndTime: "", pageSize:6, pageNum:1, total:0, form: { startTime: "", endTime: "", page: "", size: "", resname: "", userId: "", }, list: [ { value: "0", id: "", pic: "", courseName: "", introduce: "", }, ], }; }, created() { this.findAllUserCourse(); }, methods: { findAllUserCourse(){ this.userId=localStorage.getItem("userId") this.form.page = this.pageNum; this.form.size = this.pageSize; this.form.resname = this.form.courseName; this.form.startTime = this.formatDate(this.startEndTime[0]); this.form.endTime = this.formatDate(this.startEndTime[1]); findAllUserCourse(this.form).then((resp)=>{ this.list = resp.data.data.courses.list; console.log(this.list); this.total = resp.data.data.courses.total; this.form.startTime = ""; this.form.endTime = ""; }) }, toCourseDetail(id) { this.centerDialogVisible=true this.courseDetail(id) }, courseDetail(){ }, handlePageChange(page) { this.pageNum = page; this.findCourseAll(); }, formatDate(date) { if (!date) return ""; const year = date.getFullYear(); const month = (date.getMonth() + 1).toString().padStart(2, "0"); const day = date.getDate().toString().padStart(2, "0"); const hours = date.getHours().toString().padStart(2, "0"); const minutes = date.getMinutes().toString().padStart(2, "0"); const seconds = date.getSeconds().toString().padStart(2, "0"); return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; }, }, }; </script> <style scoped> #box ul { display: flex; flex-wrap: wrap; position: absolute; top: 220px; } #box li { padding: 3px; list-style: none; margin-right: 15px; border: 1px solid #eee; } #box img { width: 200px; height: 150px; } </style>报错UserCourseView.vue:110 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'id')"