目录

1.实现效果

2.实现代码

 3.重要配置项

---

1.实现效果

然后清空输入，返回所有项目

2.实现代码

<template>
  <el-select
    v-model="value"
    filterable
    placeholder="请选择"
    multiple
    :reserve-keyword="true"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "App",
  components: {
    // HelloWorld
  },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "黄金糕双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "黄金糕龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
};
</script>

3.重要配置项

filterable  是否可搜索

multiple   是否多选

:reserve-keyword="true"  多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词

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