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次。

(三)解决办法

方法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('点击')
   }
 }