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 = []
  }
}
相关推荐
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
midsummer_woo11 小时前
基于springboot+vue+mysql工程教育认证的计算机课程管理平台(源码+论文)
vue.js·spring boot·mysql
喝拿铁写前端12 小时前
技术是决策与代价的平衡 —— 超大系统从 Vue 2 向 Vue 3 演进的思考
前端·vue.js·架构
豆豆(设计前端)12 小时前
如何成为高级前端开发者:系统化成长路径。
前端·javascript·vue.js·面试·electron
苦瓜若叶睦13 小时前
Vue (Official) v3.0.2 新特性 为非类npm环境引入 globalTypesPath 选项
vue.js
springfe010113 小时前
模块与组件区别
javascript·vue.js
结衣结衣.14 小时前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
哎呦薇15 小时前
从开发到发布:手把手教你将Vue组件上传npm
前端·vue.js
用户38022585982415 小时前
vue3源码解析:生命周期
前端·vue.js·源码阅读
markyankee10117 小时前
Vue-Router:构建现代化单页面应用的路由引擎
前端·vue.js