element select下拉框高亮显示输入文本

 这样的一个需求

思路就是把请求到的数据分别存到两个变量 一个会根据高亮值改变 一个永不改变 然后替换要改变的数据的内容成标签形式 用v-html渲染出来

<template>
<el-select ref="myselect" style="width: 100%;" class="myselect" v-model="value" clearable filterable placeholder="请输入关键字快捷进行站房选择" @change="selectChange" :filter-method="searchChange">
     <el-option v-for="item in options" :key="item.monitorId" :label="item.monitorName"
                            :value="item.monitorId">
           <div v-html="item.monitorName"></div>//使用v-html渲染高亮文字
      </el-option>
</el-select>
</template>
export default {
   mounted() {
            getMonitor_drop_list().then(e => {
                this.copyOptions = this.options = e.data.data //调接口获取数据 分别赋值
            })
    },
   data() {
        return {
            value: '',
            options: [],
            copyOptions: [],
    },
   methods: {
        searchChange(val) { //输入触发的事件
            this.value = val //一定要给value赋值 不然会被清空
            this.options = this.setHightLight(this.copyOptions, val);
        },
        // 设置高亮
        setHightLight(arr, keyword) {
            if (arr) {
                let newArr = JSON.parse(JSON.stringify(arr))
                if (newArr && newArr.length > 0 && keyword) {
                    newArr = newArr.filter((item) => {
                        let reg = new RegExp(keyword, "g");
                        let replaceString = `<span style='color: red;font-weight: bolder;'>${keyword.trim()}</span>`;
                        if (item.monitorName.match(reg)) {
                            item.monitorName = item.monitorName.replace(reg, replaceString);
                            return item;
                        }
                    });
                    return newArr;
                }
                // 空返回原数组
                if (!keyword) {
                    return newArr;
                }
            }
        },
        selectChange() { //select的change事件 一定要重新赋值 不然就会出现带有标签的值
            this.options=JSON.parse(JSON.stringify(this.copyOptions))
        },
   }
}