elementui中el-radio点击取消选中状态

博主： xigua
发布时间：2021 年 03 月 23 日
2392 次浏览
1 条评论
385字数
分类：前端

如题，需求如此，使用的 vue 的 ui 框架 elementUI ，需要实现 radio 再次点击可以取消选中状态


<el-radio-group v-model="radioValue">
  <el-radio 
    @click.native.prevent="handleRadioClick(1)" 
    :label="1">备选项1</el-radio>
  <el-radio 
    @click.native.prevent="handleRadioClick(2)" 
    :label="2">备选项2</el-radio>
  <el-radio 
    @click.native.prevent="handleRadioClick(3)" 
    :label="3">备选项3</el-radio>
</el-radio-group>

handleRadioClick(val) {
  this.radioValue === val ? this.radioValue = '' : this.radioValue = val
},

主要就是 @click.native.prevent 的运用，直接使用 @click 无法监听到 点击 事件，需要使用 原生click 事件，后面加上 .prevent 会阻止后续事件的触发（比如使用后 el-radio 的change 事件就不会触发了）