1. 程式人生 > 程式設計 >Vue + Element-ui的下拉框el-select獲取額外引數詳解

Vue + Element-ui的下拉框el-select獲取額外引數詳解

直接上程式碼吧~

<el-table-column
      label="使用者型別"
      width="180">
      <template slot-scope="scope">
       <el-select v-model="scope.row.roleID"
             placeholder="請選擇" @change="changeRole($event,scope)">
        <el-option
         v-for="item in roles"
         :key="item.value"
         :label="item.label"
         :value="item.value">
        </el-option>
       </el-select>
      </template>
</el-table-column>

我想在觸發下拉框change事件時獲取到scope裡的值,因為el-select的change事件預設有個回撥引數,就是選擇的value,如果想額外獲取其他的值不能直接寫@change="changeRole(scope)",這樣會覆蓋預設的引數,加上$event就可以取到了。

不僅僅是el-select,其餘的Element-UI的元件中實現這種不想覆蓋預設引數都可以這樣使用。

補充知識:element UI中的select選擇器的change方法需要傳遞多個值

如果直接呼叫change事件,不傳任何引數,則可以獲取到當前選中的值(因為預設會將event引數傳遞過去)

場景:

你需要將select選擇器 ”選中的當前元素“ 和 ”其他你需要的值“ 一起傳遞過去?

做法:

change ($event,“你要傳遞的其他值”)

以上這篇Vue + Element-ui的下拉框el-select獲取額外引數詳解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。