1、为 el-select 添加 filterable 属性即可启用筛选功能。

• 默认情况下，Select 会找出所有 label 属性包含输入值的选项。
• 如果希望使用其他的搜索逻辑，可以通过传入一个 filter-method 来实现。 filter-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。

//官方代码：
<template>
  <el-select v-model="value" filterable placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>
//项目代码
<template>
  <el-select style="width: 100%;"
                     v-if="type==='add'"
                     @focus="remoteMethod2('')"
                     v-model="form.sugarCode"
                     filterable
                     placeholder="输入关键字进行搜索"
                     :remote-method="remoteMethod2"
                     :loading="farmer_loading"
          >
            <el-option
                v-for="item in varietyInfo"
                :key="item.sugarCode"
                :label="item.sugarName"
                :value="item.sugarCode"
            >
            </el-option>
          </el-select>
</template>

如图所示

2、为 el-select 添加 clearable属性即可启用清空功能。

官方代码：
<template>
  <el-select v-model="value" filterable clearable placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>
//项目代码
<template>
 <el-select style="width: 100%;"
                     v-if="type==='edit'"
                     @focus="remoteMethod2('')"
                     v-model="form.sugarCode"
                     placeholder="输入关键字进行搜索"
                     :remote-method="remoteMethod2"
                     :loading="farmer_loading"
                     filterable
                     clearable

          >
            <el-option
                v-for="item in varietyInfo"
                :key="item.sugarCode"
                :label="item.sugarName"
                :value="item.sugarCode"
            >
            </el-option>
          </el-select>
</template>

如图所示：