<template> <el-select v-model="value" placeholder="请选择" clearable filterable @change="selectWorkName"> <!--特别注意@change="selectWorkName" 与@change="selectWorkName()"的区别--> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </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: '' } }, methods:{ selectWorkName(id){ console.log("select中对应value值",id) let selectedName = {}; selectedName = this.options.find((item)=>{//这里的chargingWorkNameList就是上面遍历的数据源 return item.value === id; //筛选出匹配数据,是对应数据的整个对象 }); console.log(selectedName.label) } } } </script>