(一) 程式碼演示

程式碼如下

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