el-select创建单选条目
时间: 2023-12-22 12:29:28 浏览: 84
el-select是ElementUI中的一个组件,用于创建下拉选择框。要创建单选条目,可以使用el-option组件作为el-select的子组件,并设置其属性value为选项的值。以下是一个示例代码:
```html
<template>
<el-select v-model="selectedItem" 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 {
selectedItem: '', // 用于存储选中的条目的值
options: [ // 选项列表
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
]
};
}
};
</script>
```
在上面的代码中,我们使用v-model指令将选中的条目的值绑定到selectedItem变量上。通过遍历options数组,我们创建了el-option组件,并将每个选项的值和标签绑定到相应的属性上。当用户选择一个选项时,selectedItem的值会自动更新。
阅读全文