element下拉框搜索

要实现element下拉框搜索功能，可以使用element-ui中的el-select组件，并在其中使用el-option组件作为下拉选项。

1. 首先，将el-select组件放置在需要的位置上，并给它一个v-model属性，表示当前选中的值。同时，添加一个filterable属性，表示启用搜索功能。

<el-select v-model="selectedValue" filterable>
  ...
</el-select>

2. 在el-select组件内部，使用el-option组件作为下拉选项。对于需要搜索的选项，可以在el-option组件上添加一个label属性。

<el-select v-model="selectedValue" filterable>
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

3. 在Vue实例中，定义一个options数组，包含所有可选的选项。在需要搜索时，可以通过computed属性进行过滤。

computed: {
  filteredOptions() {
    return this.options.filter(option => option.label.toLowerCase().indexOf(this.searchText.toLowerCase()) >= 0);
  }
}

4. 在el-select组件中，使用v-for指令遍历filteredOptions数组，然后将label和value分别作为el-option组件的属性。

<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>

5. 最后，在Vue实例中，定义一个searchText变量，表示当前搜索的文本。可以在el-select组件上添加一个@query-change事件，当搜索文本发生变化时，将searchText变量更新为最新的搜索文本。

<el-select v-model="selectedValue" filterable @query-change="searchText=$event">
  ...
</el-select>

这样，就可以实现element下拉框搜索功能了。