elementui中el-radio控件click事件触发两次的解决办法(⼀) 代码演⽰
代码如下
<el-radio v-model="radioValue" @click.native="handleColumnsConfig" :label="1">字段1</el-radio>
点击事件
methods: {
handleColumnsConfig(el) {
alert('点击')
}
}
发现点击事件被触发了两次
(⼆)原因
elementui中，el-radio控件包含了label和input标签，在el-radio上设置了点击事件，让两个标签都拥有了该事件，所有click⽅法被调⽤了2次。
htmlradio添加切换事件(三)解决办法
⽅法1.  增加prevent修饰符阻⽌事件传递
<el-radio v-model="radioValue" @click.native.prevent="handleColumnsConfig" :label="1">字段1</el-radio>
⽅法2. 因为都触发了input标签和label标签的点击事件，可以通过对应事件的标签作加判断阻⽌其中⼀个就可以了。
methods: {
handleColumnsConfig(el) {
// 当是input标签触发的点击事件时，阻⽌该事件
if (el.target.tagName === 'INPUT') return
alert('点击')
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。