el-input下拉列表
时间: 2023-10-07 22:13:34 浏览: 58
你可以使用 Element UI 的 `<el-input>` 组件结合 `<el-select>` 组件来创建一个带下拉列表的输入框。下面是一个示例代码:
```html
<template>
<el-input v-model="inputValue" placeholder="请输入内容">
<el-select v-model="selectedValue" slot="prepend" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-input>
</template>
<script>
export default {
data() {
return {
inputValue: '', // 输入框的值
selectedValue: '', // 下拉列表选中的值
options: [ // 下拉列表的选项
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
]
}
}
}
</script>
```
在上面的代码中,`<el-input>` 组件是输入框,通过 `v-model` 绑定 `inputValue` 来实现双向数据绑定。而 `<el-select>` 组件是下拉列表,通过 `v-model` 绑定 `selectedValue` 来获取选中的值。在 `<el-select>` 组件内部使用 `<el-option>` 来定义下拉列表的选项。