Element Ui Select Change事件如何傳值
作者：前端老兵
在 Element UI 中，el-select 組件的 change 事件默認(rèn)情況下會傳遞當(dāng)前選中項的值（即 v-model 的值）。如果你想要在 change 事件中傳遞額外的信息，有幾種方式可以實(shí)現(xiàn).
1. element ui select change事件如何傳值
在 Element UI 中，el-select 組件的 change 事件默認(rèn)情況下會傳遞當(dāng)前選中項的值（即 v-model 的值）。
如果你想要在 change 事件中傳遞額外的信息，有幾種方式可以實(shí)現(xiàn)：
1.1. 方法一：使用 $event 和額外參數(shù)
你可以直接在事件處理器中添加你需要的參數(shù)，通過 JavaScript 的函數(shù)特性來實(shí)現(xiàn)。
<el-select v-model="selectedValue" @change="(val, extra) => handleChange(val, extra)">
</el-select>然后在你的 Vue 實(shí)例中定義 handleChange 方法：
methods: {
handleChange(value, extra) {
console.log('Selected value is:', value);
console.log('Extra parameter is:', extra);
}
}1.2. 方法二：使用匿名函數(shù)包裹
如果希望以更簡潔的方式傳遞額外參數(shù)，可以在模板中直接使用匿名函數(shù)包裹起來。
<el-select v-model="selectedValue" @change="(val) => handleChange(val, 'extra data')">
</el-select>然后在 Vue 實(shí)例中同樣定義 handleChange 方法：
methods: {
handleChange(value, extra) {
console.log('Selected value is:', value);
console.log('Extra parameter is:', extra);
}
}1.3. 方法三：使用 $event 并攜帶額外數(shù)據(jù)
如果你想通過 $event 獲取到更多的信息（如整個選項對象），并且同時傳遞額外的數(shù)據(jù)，可以在事件處理函數(shù)中這樣做：
<el-select v-model="selectedValue" @change="handleCustomChange">
</el-select>然后在 Vue 實(shí)例中這樣定義 handleCustomChange 方法：
methods: {
handleCustomChange($event) {
const value = $event; // 當(dāng)前選中的值
const extraData = 'some extra data'; // 自定義參數(shù)
console.log('Selected value is:', value);
console.log('Extra parameter is:', extraData);
}
}以上就是幾種在 el-select 的 change 事件中傳遞額外參數(shù)的方法。
你可以根據(jù)自己的具體需求選擇最合適的方式來實(shí)現(xiàn)。
責(zé)任編輯：武曉燕
來源：
前端愛好者
