html
<el-radio-group v-model="myRadio">
<el-radio value="1">Option 1</el-radio>
<el-radio value="2">Option 2</el-radio>
</el-radio-group>
js
const myRadio = ref("1");
- 在前端开发中,使用 Element Plus 2.2.27 的单选框 Radio 组件时,遇到了选中一个选项后,全部选项都变为选中状态的问题

问题原因
-
这是由于 Element Plus 版本问题导致的,在 2.2.27 版本中,Radio 组件支持是 label 属性,而不是 value 属性
-
在 Element Plus 2.6.0 版本后,Radio 组件的开始支持 value 属性

处理策略
-
升级 Element Plus 版本到 2.6.0 或更高版本,使用 value 属性来定义选项的值
-
如果无法升级 Element Plus 版本,可以使用 label 属性来定义选项的值
html
<el-radio-group v-model="myRadio">
<el-radio label="o1">Option 1</el-radio>
<el-radio label="o2">Option 2</el-radio>
</el-radio-group>
js
const myRadio = ref("o1");