vue3 element plus中el-radio选中之后再次点击取消选中问题
作者：学习鸭
这篇文章主要介绍了vue3 element plus中el-radio选中之后再次点击取消选中问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3 中el-radio再次点击取消选中
Change 事件
radio 暴露出来的只有一个 change 事件，
通过调试发现：
点击已经选择的 Radio ，不会触发 Change 事件
Click 事件
click会执行两次，使用e.target.tagName == 'INPUT’来判断让他只执行一次，
e.srcElement.defaultValue拿到选中值
<template>
<el-radio-group v-model="radioVal" @click="clickitem($event)">
<el-radio label="1" >Option A</el-radio>
<el-radio label="2">Option B</el-radio>
<el-radio label="3" >Option C</el-radio>
</el-radio-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const radio = ref()
const clickitem=(e)=>{
if(e.target.tagName == 'INPUT'){
e.srcElement.defaultValue === radioVal.value ? (radioVal.value = "") : (radioVal.value = e.srcElement.defaultValue);
}
}
</script>
<el-radio-group v-model="formData[`arr${[index]}`]">
<el-radio
v-for="i in item.dictValues"
:key="i"
:label="`${i},${item.id}`"
@click="radioChange($event,index)"
>{{ i }}</el-radio
>
</el-radio-group>
<script lang="ts">
const radioChange= (e,index)=> {
if(e.target.tagName == 'INPUT'){
// console.log(23,e.srcElement.defaultValue,index,formData[`arr${[index]}`]);
e.srcElement.defaultValue === formData[`arr${[index]}`] ? (formData[`arr${[index]}`] = "") : (formData[`arr${[index]}`] = e.srcElement.defaultValue);
}
}
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。