el-select下拉菜单如何可以手输入内容

苹果电脑的鑫鑫2025-12-05 15:31

<el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select>下拉菜单如何可以手输入内容并且根据输入的内容对应显示下拉内容

复制代码

<template>
  <div style="padding: 20px;">
    <!-- 带输入过滤的下拉选择框 -->
    <el-select
      v-model="form.region"
      placeholder="请选择活动区域/手动输入搜索"
      filterable          <!-- 开启输入过滤功能 -->
      :filter-method="filterRegion"  <!-- 自定义过滤方法 -->
      clearable           <!-- 可选：增加清空按钮 -->
      style="width: 300px;"
    >
      <el-option
        v-for="item in regionOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        region: ''  // 绑定的选中值
      },
      // 下拉选项数据源（建议抽离，便于维护）
      regionOptions: [
        { label: '区域一', value: 'shanghai' },
        { label: '区域二', value: 'beijing' },
        // 可扩展更多选项
        { label: '区域三', value: 'guangzhou' },
        { label: '区域四', value: 'shenzhen' }
      ]
    };
  },
  methods: {
    // 自定义过滤方法：val 是输入框的实时输入内容
    filterRegion(val) {
      // 如果输入为空，显示所有选项
      if (!val) return true;
      // 过滤逻辑：匹配 label（中文名称）或 value（值），不区分大小写
      return this.regionOptions.filter(item => {
        return item.label.toLowerCase().includes(val.toLowerCase()) 
            || item.value.toLowerCase().includes(val.toLowerCase());
      });
    }
  }
};
</script>

关键注意点

filterable 是基础，开启后才会显示输入框；
自定义 filter-method 时，参数是输入框的实时值，需返回布尔值（或过滤后的数组）；
若需要纯输入（不限制下拉选项），可结合 allow-create 属性（Element Plus 支持，Element UI 需自定义）；
远程搜索时，建议增加输入防抖（比如延迟 300ms 再请求接口），避免频繁请求。

这样就能实现「手动输入内容 + 根据输入过滤下拉选项」的核心需求了。