element-plus 关于 ＜el-radio-group＞单选框一选全选问题
原创
element-plus 关于 ＜el-radio-group＞单选框一选全选问题
原创
兔云小新LM
发布于 2024-10-26 19:05:47
发布于 2024-10-26 19:05:47
代码可运行
运行总次数：0
代码可运行
很多同学在使用Element Plus V3版本的单选按钮组时，可能会遇到这样一个问题。任意选择一个单选按钮，会自动将全部按钮选中。出现这个问题，可能是因为你的版本与你的用户不对导致的。
<template>
<div class="mb-2 flex items-center text-sm">
<el-radio-group v-model="radio1" class="ml-4">
<el-radio value="1" size="large">Option 1</el-radio>
<el-radio value="2" size="large">Option 2</el-radio>
</el-radio-group>
</div>
</template>如上代码，你选择了单选按钮就自动将所有单选按钮选中。如果出现该文件，你可以去package.json文件中查阅一下你使用的版本号，正常的情况下，肯定是低于2.6版本。
在官方文档中也提到了，从2.6版本开始，该组价做了一些调整，废除了label标签。如果你是用的小于2.6版本，直接使用上面的代码，就会出现文章提到的问题。
label 作为 value 来使用已经被 废弃, 建议label 只用来表示展示的文字，这个被废弃的用法将会在 3.0.0 版本被移除，请考虑使用新 API 替换。新 API value 在2.6.0 中已经可用，您可以使用 value API 来设置复选框的值。
要解决这个问题，就必须加上label标签。正确的方法如下：
<template>
<div class="mb-2 flex items-center text-sm">
<el-radio-group v-model="radio1" class="ml-4">
<el-radio value="1" size="large" label="1">Option 1</el-radio>
<el-radio value="2" size="large" label="1">Option 2</el-radio>
</el-radio-group>
</div>
</template>总结：
1、大于等于2.6的版本，不需要使用label标签。
2、小于2.6版，就需要添加上label标签。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
