在 vue2 引入 elementUI 之后, 常常会遇到此类需要,el-select 获取点击项的整个对象 item,而不是默认的 v -model 我的项目
官网文档有 value-key=”value” 的用法
https://element.eleme.cn/#/zh-CN/component/select#select-attributes
案例
<template>
<div>
<el-select v-model="value" value-key="value" @change="change" placeholder="请抉择">
<el-option
v-for="item in options"
:key="item.value"
:label="`${item.label}`"
:value="item"><!-- 绑定整个对象 item-->
{{item.label}}
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data (){
return {
options: [{
value: '选项 1',
label: '黄金糕'
}, {
value: '选项 2',
label: '双皮奶'
}, {
value: '选项 3',
label: '蚵仔煎'
}, {
value: '选项 4',
label: '龙须面'
}, {
value: '选项 5',
label: '北京烤鸭'
}],
value: ''
}
},
created() {
// 初始化赋值间接 赋值整个对象
this.value = {
value: '选项 5',
label: '北京烤鸭'
};
},
methods: {
// chnage 触发
change(e) {console.log(e);// 打印整个对象
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>