文章介绍了两种使用Vue.js和ElementUI获取select选择框值的方法：一种是使用watch监听selectedValue的变化,另一种是使用@change事件,两种方法都能实现获取选择的value和label
目录
1 使用watch监听selectedValue的变化2 @change事件获取2.1 只返回选择的value2.2 返回选择的value和label总结1 使用watch监听selectedValue的变化
可以使用Element UI中的v-model指令，将选中的值和对应的标签存储在data中的变量中
具体代码如下：
<template> <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <div> <div>选择的值：{{ selectedValue }}</div> <div>对应的标签：{{ selectedLabel }}</div> </div></template><script>export default { data() { return { options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' } ], selectedValue: '', selectedLabel: '' }; }, watch: { selectedValue(newVal) { const option = this.options.find(item => item.value === newVal); this.selectedLabel = option ? option.label : ''; } }};</script>结果展示：
在template中，v-model指令绑定了selectedValue变量，表示选中的值。
同时，给<el-option>添加了v-for循环生成所有的选项。
当选中的值改变时，使用watch监听selectedValue的变化，通过find方法从options中找到选中的值对应的选项，并将标签存储在selectedLabel变量中。
最后，将selectedValue和selectedLabel显示在页面上。
2 @change事件获取
2.1 只返回选择的value
<template> <div> <el-select v-model="selectedValue" @change="getSelectValue"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" > </el-option> </el-select> </div></template><script>export default { data() { return { options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' } ], selectedValue: '', }; }, methods: { getSelectValue(data) { console.log('value', data); }, },};</script>结果展示：
2.2 返回选择的value和label
下面是一个使用@change获取element选择框的值和名称的Vue示例代码：
<template> <div> <el-select v-model="selectedOption" @change="handleOptionChange"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" > </el-option> </el-select> <p>Selected Option: {{ selectedOption }}</p> <p>Selected Option Label: {{ selectedOptionLabel }}</p> </div></template><script>export default { data() { return { options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' } ], selectedOption: '', selectedOptionLabel: '', }; }, methods: { handleOptionChange() { this.selectedOptionLabel = this.options.find( (option) => option.value === this.selectedOption ).label; }, },};</script>结果展示：
在这个示例代码中，我们首先定义了一个el-select元素，并使用v-model指令绑定了一个selectedOption变量，这个变量将用于存储用户选择的选项的值。
接着，我们在el-select元素上添加了一个@change事件监听器，当用户在选择框中选择一个选项时，该事件监听器会被触发。
handleOptionChange方法是@change事件监听器的处理函数，它通过使用find方法查找用户选择的选项的标签，并将其存储在selectedOptionLabel变量中。
最后，我们在模板中将selectedOption和selectedOptionLabel变量的值显示出来。
