Vue.js 中使用 Element UI select 组件实现可搜索下拉选择框

在 Vue.js 中使用 Element UI Select 组件实现可搜索下拉选择框

本文介绍如何在 Vue.js 项目中使用 Element UI 的 el-select 组件实现一个可搜索的下拉选择框。示例代码展示了如何绑定 v-model、设置 clearable、placeholder、filterable 属性，以及如何使用 el-option 组件循环渲染选项。

<el-select v-model='filter.tcl_os_version' clearable :placeholder='filter.plate_form === 'TV' ? '请选择系统版本' : '请选择 RomVersion'' filterable class='el-input' @keyup.enter.native='search'>
  <el-option v-for='item in tclOsVersionList' :key='item' :label='item' :value='item'></el-option>
</el-select>

代码解析：

el-select：Element UI 的下拉选择框组件。
v-model: 绑定选择框的值，值保存在 filter.tcl_os_version 中。
clearable: 表示是否可清空选择框，设置为 true 表示可清空。
:placeholder: 设置提示文字。这里使用三元运算符根据 filter.plate_form 的值动态设置提示文字。
filterable: 表示是否可搜索过滤选项。
@keyup.enter.native: 监听按下回车键事件，触发 search 方法。
el-option: 选项组件，用于渲染每个选项。
v-for: 循环遍历 tclOsVersionList 数组，生成选项列表。
:key: 每个选项的唯一标识符。
:label: 选项的显示文字。
:value: 选项的值。

使用方法：

导入 Element UI 组件：

import { Select, Option } from 'element-ui';

注册组件：

Vue.use(Select); // 注册 Select 组件
Vue.use(Option); // 注册 Option 组件

在模板中使用 el-select 组件，并设置相关的属性和事件。
在数据中定义 tclOsVersionList 数组，存放选项列表。

注意：

tclOsVersionList 数组的格式应该为一个字符串数组，例如：

data() {
  return {
    tclOsVersionList: ['Android 10', 'Android 11', 'iOS 14', 'iOS 15']
  }
}

search 方法需要根据用户输入的搜索词进行筛选，并更新 tclOsVersionList 数组，从而实现搜索过滤功能。

通过以上步骤，你就可以在 Vue.js 项目中使用 Element UI Select 组件实现一个可搜索的下拉选择框，方便用户快速选择所需选项。

Vue.js 中使用 Element UI select 组件实现可搜索下拉选择框