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 = []
  }
}
相关推荐
拉不动的猪4 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
java水泥工6 小时前
校园管理系统|基于SpringBoot和Vue的校园管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
正义的大古8 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
子兮曰10 小时前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
kk不中嘞12 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
影子信息13 小时前
el-tree 点击父节点无效,只能选中子节点
前端·javascript·vue.js
徐小夕13 小时前
用Vue3写了一款协同文档编辑器,效果简直牛!
前端·javascript·vue.js
小菜全14 小时前
打包 Uniapp
javascript·vue.js·html5
小高00717 小时前
🔥🔥🔥Vue部署踩坑全记录:publicPath和base到底啥区别?99%的前端都搞错过!
前端·vue.js·面试