效果图

代码

<template>
  <el-select
    v-model="value"
    clearable
    filterable
    remote
    :remote-method="remoteSearch"
    placeholder="请选择"
    @clear='handleClear'
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <div v-html="item.inner"></div>
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          value: "1",
          label: "黄金糕",
          inner: "黄金糕",
        },
        {
          value: "2",
          label: "双皮奶",
          inner: "双皮奶",
        },
        {
          value: "3",
          label: "蚵仔煎",
          inner: "蚵仔煎",
        },
        {
          value: "4",
          label: "龙须面",
          inner: "龙须面",
        },
        {
          value: "5",
          label: "北京烤鸭",
          inner: "北京烤鸭",
        },
      ],
      options: [
        {
          value: "1",
          label: "黄金糕",
          inner: "黄金糕",
        },
        {
          value: "2",
          label: "双皮奶",
          inner: "双皮奶",
        },
        {
          value: "3",
          label: "蚵仔煎",
          inner: "蚵仔煎",
        },
        {
          value: "4",
          label: "龙须面",
          inner: "龙须面",
        },
        {
          value: "5",
          label: "北京烤鸭",
          inner: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  created() {
  },
  methods: {
    remoteSearch(data) {
      console.log("remoteSearch---data:", data);
      this.value = data;
      this.options = [];
      this.querySearch();
    },
    querySearch() {
      // 深拷贝 脱离关系
      const data = JSON.parse(JSON.stringify(this.data))
      this.options = this.setHightLight(data, this.value);
    },
    // 设置高亮
    setHightLight(arr, keyword) {
      if (arr && arr.length > 0 && keyword) {
        arr = arr.filter((item) => {
          let reg = new RegExp(keyword, "g");
          let replaceString = `<span class='high'>${keyword.trim()}</span>`;
          if (item.inner.match(reg)) {
            //为了不影响原始name，我们这里给item重新设置一个parseName，模板中显示的是parseName
            item.inner = item.inner.replace(reg, replaceString);
            return item;
          }
        });
        return arr;
      }

      // 空返回原数组
      if(!keyword){
        return arr
      }
    },
    // 重置
    handleClear(){
      this.options = JSON.parse(JSON.stringify(this.data))
    }
  },
};
</script>

<style>
.high {
  color: #2baf6c !important;
}
</style>

欢迎点赞、评论、收藏，谢谢 ( ｡ớ ₃ờ)ھ