Vue+ElementUI el-select选择器:绑定的值为对象
在Vue中使用ElementUI的el-select
组件时,如果需要绑定一个对象到选择器上,可以通过v-model
来实现。这里有一个简单的例子:
<template>
<el-select v-model="selectedValue" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: null, // 绑定的对象
options: [
{ value: '1', label: '选项1' },
{ value: '2', label: '选项2' },
{ value: '3', label: '选项3' }
]
};
}
};
</script>
在这个例子中,selectedValue
是绑定到el-select
的模型,它是一个对象。options
数组包含了每个选项的对象,其中label
属性是显示给用户看的文本,而value
是这个选项的唯一标识。当用户选择一个选项时,selectedValue
将会更新为对应的对象。
请注意,绑定的对象应该包含label
和value
属性,以便el-select
可以正确地显示和识别选项。
评论已关闭