element ui写一个下拉选择框的组件
时间: 2023-07-01 18:13:09 浏览: 106
好的,以下是一个简单的代码示例:
```vue
<template>
<el-select v-model="selectedItem" placeholder="请选择">
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedItem: '',
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
]
}
}
}
</script>
```
以上代码定义了一个 `el-select` 组件,通过 `v-model` 绑定了一个 `selectedItem` 变量来保存用户选择的值。下拉框中的选项通过 `v-for` 循环渲染,每个选项都是一个 `el-option` 组件,通过 `label` 和 `value` 属性来设置选项的文本和值。用户选择一个选项后,`selectedItem` 变量会自动更新,我们可以通过它来获取用户选择的值。
当然,以上只是一个简单的示例,你可以根据自己的实际需求来扩展这个组件,例如添加搜索功能、动态加载选项等等。
阅读全文