el select實現 change事件

2022-05-18 03:11:18 字數 2291 閱讀 9174

小白本白,這東西之前沒怎麼用過(問了一下經常用...我居然沒怎麼用過..ε=(´ο`*)))唉),今兒傳乙個id的時候還要傳乙個name,所以記錄一下

原來的下拉框選擇器**:

<

el-col

:span

="24"

>

<

el-form-item

label

=" "

:label-width

="'25px'"

prop

="newclassid"

:rules

="[

]">

<

div

class

="el-input el-input--medium el-input-group el-input-group--prepend"

autocomplete

="off"

>

<

div

class

="el-input-group__prepend"

>調入班組

div>

<

el-select

style

="width:100%"

v-model

="modelform.newclassid"

placeholder

="請選擇調入班組"

>

<

el-option

v-for

="item in classinfos"

:key

="item.id"

:label

="item.name"

:value

="item.id"

>

el-option

>

el-select

>

div>

el-form-item

>

el-col

>

加入change後:

<

el-col

:span

="24"

>

<

el-form-item

label

=" "

:label-width

="'25px'"

prop

="newclassid"

:rules

="[

]">

<

div

class

="el-input el-input--medium el-input-group el-input-group--prepend"

autocomplete

="off"

>

<

div

class

="el-input-group__prepend"

>調入班組

div>

<

el-select

style

="width:100%"

v-model

="modelform.newclassid"

@change="changenewclass"

placeholder

="請選擇調入班組"

>

<

el-option

v-for

="item in classinfos"

:key

="item.id"

:label

="item.name"

:value

="item.id"

>

el-option

>

el-select

>

div>

el-form-item

>

el-col

>

changenewclass() 

}},

也就是編輯表單中的下拉框選擇器,傳的是classid,但是頁面儲存想顯示classname

受教了@change 和 @click乙個樣

乙個是切換的時候觸發

乙個是點選的時候觸發

切換指的是el-select,選擇了就是切換

input 和chang事件的區別

每當元素的 value 改變,input 事件都會被觸發。input事件在輸入框輸入的時候回實時響應並觸發 change 事件僅當 value 被提交時觸發,如按回車鍵,從乙個 options 列表中選擇乙個值,change 事件並不是每次元素的 value 改變時都會觸發。change事件在inp...

關於el select元件設定預設值的實現

問題 最近寫專案的時候遇到將el select元件設定預設值需求,通過查閱資料發現很多是使用v model來實現的,但是只用v model可能會有一些小小的問題。因此根據他們的進行改變了一下 實現方式 el select元件 templatevalue placeholder 請選擇模板 chang...

el select元件傳遞物件值

使用el select元件時,如果不加特別配置,選項裡的物件都是藍色,為選中狀態。這時,需要在裡新增 value key id 項 然後在option裡面的key id,這樣就可以正常傳遞物件值了 如下圖 selected item value key id style width 150px cl...