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 = []
  }
}
相关推荐
markyankee1013 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
翻滚吧键盘5 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹6 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
Q_970956397 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
翻滚吧键盘7 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
叹一曲当时只道是寻常8 小时前
vue中添加原生右键菜单
javascript·vue.js
markyankee10110 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
khalil11 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
速易达网络20 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj16899721 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode