在Vue中使用el-select
组件时,你可以通过v-model
绑定选中项的值,并使用el-option
的label
属性来显示标签。如果你需要获取当前选中项的标签值,你可以通过选中项的值在数据选项中查找对应的标签。
以下是一个简单的例子:
<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>
</template>
<script>
export default {
data() {
return {
selectedValue: null,
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
],
};
},
watch: {
selectedValue(newValue) {
// 当选中项变化时,获取对应的标签
const selectedLabel = this.options.find(option => option.value === newValue)?.label;
console.log('Selected Label:', selectedLabel);
}
}
};
</script>
<el-form-item label="所属仓库" prop="warehouseId">
<el-select
v-model="form.warehouseId"
clearable
:disabled="banStatus"
placeholder="请选择"
@keyup.enter.native="handleQuery"
@change="handleChange"
>
<el-option v-for="item in options1" :key="item.id" :label="item.warehouseName" :value="item.id" />
</el-select>
</el-form-item>
data() {
return {
options1: [],
}}
// 选择仓库
handleChange(value) {
const selectedLabel = this.options1.find(option => option.id === value).warehouseName
console.log('仓库Label:', selectedLabel)
},