el-select 支持拼音搜索（含插件 pinyin-match 的使用）

cnpm i pinyin-match --save

import PinYinMatch from "pinyin-match";

    matchFruit(searchContent) {
      if (searchContent) {
        let result = [];
        this.list_org.forEach((item) => {
          // matchResult 的值为 true/false
          let matchResult = PinYinMatch.match(item.label, searchContent);
          if (matchResult) {
            result.push(item);
          }
        });
        this.list_filtered = result;
      } else {
        this.list_filtered = this.list_org;
      }
    },

<template>
  <div class="container">
    <el-select
      v-model="fruit"
      placeholder="请选择水果"
      filterable
      :filter-method="matchFruit"
      clearable
      @clear="clearFruit"
    >
      <el-option
        v-for="item in list_filtered"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
import PinYinMatch from "pinyin-match";
export default {
  data() {
    return {
      fruit: "",
      list_org: [
        {
          value: 1,
          label: "苹果",
        },
        {
          value: 2,
          label: "香蕉",
        },
        {
          value: 3,
          label: "梨子",
        },
      ],
      list_filtered: [],
    };
  },
  mounted() {
    this.list_filtered = this.list_org;
  },
  methods: {
    matchFruit(searchContent) {
      if (searchContent) {
        let result = [];
        this.list_org.forEach((item) => {
          // matchResult 的值为 true/false
          let matchResult = PinYinMatch.match(item.label, searchContent);
          if (matchResult) {
            result.push(item);
          }
        });
        this.list_filtered = result;
      } else {
        this.list_filtered = this.list_org;
      }
    },
    clearFruit() {
      this.list_filtered = this.list_org;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin: 30px;
}
</style>