vue3 element plus中el-radio選中之后再次點擊取消選中問題
更新時間:2024年08月16日 09:33:44 作者:學(xué)習(xí)鴨
這篇文章主要介紹了vue3 element plus中el-radio選中之后再次點擊取消選中問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3 中el-radio再次點擊取消選中
Change 事件
radio 暴露出來的只有一個 change 事件,
通過調(diào)試發(fā)現(xiàn):
點擊已經(jīng)選擇的 Radio ,不會觸發(fā) Change 事件
Click 事件
click會執(zhí)行兩次,使用e.target.tagName == 'INPUT’來判斷讓他只執(zhí)行一次,
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>
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Element Table 自適應(yīng)高度的實現(xiàn)示例
el-table的高度不能適應(yīng)不同電腦的分辨率,也不能跟隨瀏覽器的高度變化而變化的問題,本文就來解決一下Element Table 自適應(yīng)高度,感興趣的可以了解一下2024-07-07
vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼
本篇文章主要介紹了vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼,具有一定的參考價值,有興趣的可以了解一下2017-08-08

