我要评论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变量的值显示出来。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论