### 如何取消
选中 `el-
radio` 组件
在 Element UI 中，默认情况下，`el-
radio` 是单向绑定的，一旦某个选项被
选中，则无法通过再次点击来取消该选项的选择状态。然而，可以通过自定义逻辑实现点击已
选中的项时将其取消的功能。
以下是两种常见的解决方法：
#### 方法一：监听原生事件并手动控制
此方法基于第一个引用的内容[^1]，通过监听 `@click.native` 事件，在检测到用户点击的是当前已经
选中的项时，
清空绑定的数据模型值。
```vue
<template>
<div>
<el-
radio-group v-model="
radio" @click.native="on
RadioChange($event)">
<el-
radio :label="1">备选项1</el-
radio>
<el-
radio :label="2">备选项2</el-
radio>
<el-
radio :label="3">备选项3</el-
radio>
</el-
radio-group>
</div>
</template>
<script>
export default {
data() {
return {
radio: 1, // 初始值设置为1
};
},
methods: {
on
RadioChange(e) {
if (e.target.tagName === 'INPUT') {
const value = e.target._value;
if (value === this.
radio.toString()) { // 如果点击的是当前
选中的项
this.
radio = ''; //
清空数据模型
}
}
},
},
};
</script>
```
这种方法的核心在于捕获用户的点击行为，并判断是否需要清除绑定值。
---
#### 方法二：阻止默认行为并通过函数处理
第二种方式来自第二个引用[^2]，它利用了 Vue 的 `@click.native.prevent` 来阻止默认的行为，并通过调用一个额外的方法动态修改绑定值。
```vue
<template>
<div>
<el-
radio-group v-model="detailForm.
radioStatus" :key="
radioKey">
<el-
radio :label="1" @click.native.prevent="change
Radio(1)">已接听</el-
radio>
<el-
radio :label="2" @click.native.prevent="change
Radio(2)">未接听</el-
radio>
</el-
radio-group>
</div>
</template>
<script>
export default {
data() {
return {
detailForm: {
radioStatus: null,
},
radioKey: Date.now(), // 动态更新 key 值用于强制重新渲染
};
},
methods: {
change
Radio(value) {
if (this.detailForm.
radioStatus === value) {
this.detailForm.
radioStatus = null; // 当前
选中则置为空
} else {
this.detailForm.
radioStatus = value; // 否则切换至新值
}
// 更新 key 强制刷新组件（可选）
this.
radioKey = Date.now();
},
},
};
</script>
```
这种方式更加灵活，允许开发者完全掌控何时以及如何改变绑定的状态。
---
### 关键点总结
- **双向绑定机制**：无论是哪种方案，核心都是通过更改绑定变量 (`v-model`) 的值来影响视图层的表现。
- **性能优化**：如果涉及复杂场景或者频繁操作，可以考虑使用 `key` 属性触发局部重绘以提升效率。
- **兼容性注意**：确保初始值与后续赋值类型一致，比如都采用字符串或数字形式，否则可能导致匹配失败[^3]。
---
扫一扫
746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
