vue3 element plus中el-radio选中之后再次点击取消选中问题
更新时间:2024年08月16日 09:33:44 作者:学习鸭
这篇文章主要介绍了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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue+EleMentUI实现el-table-colum表格select下拉框可编辑功能实例
这篇文章主要给大家介绍了关于Vue+EleMentUI实现el-table-colum表格select下拉框可编辑功能的相关资料,element-UI表格的使用相信大家都不陌生,文中给出了详细的代码示例,需要的朋友可以参考下2023-07-07el-select如何获取下拉框选中label和value的值
在开发业务场景中我们通常遇到一些奇怪的需求,例如el-select业务场景需要同时获取我们选中的label跟 value,下面这篇文章主要给大家介绍了关于el-select如何获取下拉框选中label和value的值,需要的朋友可以参考下2022-10-10
最新评论