el-select如何搭配el-input使用

el-select 是 Element UI 提供的一个下拉选择组件，而 el-input 是一个输入框组件。它们可以结合使用，提供一个搜索功能丰富的下拉选择器。以下是如何配合使用的简单步骤和示例：

引入依赖：首先在 Vue 项目中确保已安装 Element UI，并在组件中导入这两个组件。

<template>
<el-input v-model="searchText" placeholder="搜索..." @input="filterOptions"></el-input>
<el-select v-model="selectedValue" filterable>
<el-option
v-for="item in filteredOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>

数据绑定：v-model 属性用于数据双向绑定，searchText 控制输入框的值，selectedValue 控制下拉选择的值。

功能实现：filterable 属性开启 el-select 的过滤功能，filterOptions 方法在输入框内容改变时，对选项进行筛选。

<script>
export default {
data() {
return {
searchText: '',
options: [
// 你的选项数据，例如：{ value: 'option1', label: '选项1' },
// ...
],
};
},
methods: {
filterOptions() {
this.filteredOptions = this.options.filter(item =>
item.label.toLowerCase().includes(this.searchText.toLowerCase())
);
},
},
};
</script>

初始化和更新：在组件挂载时或数据发生变化时，记得调用 filterOptions 方法初始化筛选后的选项。