element ui 搜索框中搜索关键字标红展示

示例如图

el-select上绑定remote-method属性

javascript 复制代码
 <el-select v-model="checkForm.type" filterable remote reserve-keyword :remote-method="remoteMethod" :loading="loading">
   <el-option v-for="item in options" :key="item.value" :value="item.value">
     <span v-html="item.text"></span>
   </el-option>
 </el-select>

定义remoteMethod方法

javascript 复制代码
interface ListItem {
  value: string
  label: string,
  text: string
}
const options = ref<ListItem[]>([])
const list = ref([{
  value:'123',
  label:'123',
  text:''
},{
  value:'125',
  label:'125',
  text:''
}])

const remoteMethod =  (query) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      list.value.forEach(item => {
        if(item.value.indexOf(query)>=0){
          var val = item.value.split(query)
          item.text = val.join('<span style="color:red">' + query + "</span>")
        }
      })
      options.value = list.value
    }, 1000)
  } else {
    options.value = []
  }
}
相关推荐
ElasticPDF-新国产PDF编辑器5 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Billy Qin7 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌7 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光7 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs8 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石8 小时前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
cypking9 小时前
解决 axios get请求瞎转义问题
vue.js
向阳2569 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特9 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~9 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习