element-ui select实现关键词高亮

效果图

代码

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

<script>
import axios from "../../utils/request";
export default {
  data() {
    return {
      options: [],
      value: "",
    };
  },
  created() {
    this.querySearch()
  },
  methods: {
    remoteSearch(data) {
      console.log("remoteSearch---data:", data);
      this.value = data;
      this.options = [];
      this.querySearch();
    },
    async querySearch() {
      // mock 出来的数据
      const data = await axios.get("/api/getList");
      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.querySearch()
    },
  },
};
</script>

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

mock数据

import Mock from 'mockjs'

let data = Mock.mock({
    'list|100':[{
        id:"@id",
        label:"@ctitle(5, 15)",
    }]
})

data = data.list.map((item)=>{
    return {
        ...item,
        inner:item.label
    }
})

Mock.mock('/api/getList',()=>{
    return {
        code:200,
        data
    }
})

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