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
变量的值显示出来。