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('點擊')
   }
 }