element el-select change事件传 item 对象方法
麹承
如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。
在 el-option 里，我们传入 item 对象，然后在 el-select 中，我们用 value-key 指定唯一标识，这样我们直接调用 change 方法就可以直接传入整个 item 对象，上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<el-select v-model="value" placeholder="请选择" value-key="value" @change="changeSelect">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item">
</el-option>
</el-select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
},
methods: {
changeSelect(val) {
console.log(val)
}
}
});
</script>
</body>
</html>
类似资料：