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项目打包之后生成一个可修改IP地址的文件(具体操作)

    vue项目打包之后生成一个可修改IP地址的文件(具体操作)

    这篇文章主要介绍了vue项目打包之后生成一个可修改IP地址的文件(具体操作),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • Vue+EleMentUI实现el-table-colum表格select下拉框可编辑功能实例

    Vue+EleMentUI实现el-table-colum表格select下拉框可编辑功能实例

    这篇文章主要给大家介绍了关于Vue+EleMentUI实现el-table-colum表格select下拉框可编辑功能的相关资料,element-UI表格的使用相信大家都不陌生,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-07-07
  • vue项目打包优化的方法实战记录

    vue项目打包优化的方法实战记录

    最近入职了新公司,接手了一个新拆分出来的Vue项目,针对该项目做了个打包优化,把经验分享出来,下面这篇文章主要给大家介绍了关于vue项目打包优化的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • vue中使用mixins/extends传入参数的方式

    vue中使用mixins/extends传入参数的方式

    这篇文章主要介绍了vue中使用mixins/extends传入参数的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 使vue实现jQuery调用的两种方法

    使vue实现jQuery调用的两种方法

    这篇文章主要介绍了使vue实现jQuery调用的两种方法 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • vuex与组件联合使用的方法

    vuex与组件联合使用的方法

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这篇文章主要介绍了vuex与组件联合使用的方法,需要的朋友可以参考下
    2018-05-05
  • el-select如何获取下拉框选中label和value的值

    el-select如何获取下拉框选中label和value的值

    在开发业务场景中我们通常遇到一些奇怪的需求,例如el-select业务场景需要同时获取我们选中的label跟 value,下面这篇文章主要给大家介绍了关于el-select如何获取下拉框选中label和value的值,需要的朋友可以参考下
    2022-10-10
  • vue3使用echart的两种引入方式以及注意事项说明

    vue3使用echart的两种引入方式以及注意事项说明

    这篇文章主要介绍了vue3使用echart的两种引入方式以及注意事项说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue Validate表单组件的封装详解

    Vue Validate表单组件的封装详解

    这篇文章主要为大家详细介绍了Vue Validate表单组件的封装的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解下
    2023-09-09
  • vue3项目keepAlive使用方法详解

    vue3项目keepAlive使用方法详解

    keepalive是Vue的内置组件,作用是将组件缓存在内存当中,防止重复渲染DOM,属于消耗内存获取速度,这篇文章主要介绍了vue3项目keepAlive使用方法,主要将keepaliev在vue3.0中的用法,需要的朋友可以参考下
    2024-03-03

最新评论