使用element-ui el-option 循环出来
时间: 2023-08-16 08:07:20 浏览: 475
使用Element UI的el-option组件循环出来,你可以使用v-for指令在el-select组件中循环生成el-option组件。以下是一个示例:
```html
<template>
<el-select v-model="selectedOption" placeholder="Select option">
<el-option
v-for="option in options"
:key="option.value"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
]
};
}
};
</script>
```
在上面的示例中,我们在el-select组件中使用v-for指令循环生成el-option组件。options数组包含了要循环生成的选项,每个选项包含label和value属性。在el-option中,我们将label和value绑定到options数组中的对应属性,并使用:key绑定唯一的key值。通过v-model指令,我们可以将选中的选项的值绑定到selectedOption变量中。
这样,当页面渲染时,el-option组件会根据options数组循环生成相应的选项。用户可以从下拉列表中选择一个选项,并将选中的值保存在selectedOption变量中。