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 = []
  }
}
相关推荐
六边形6661 小时前
Vue中的 ref、toRef 和 toRefs 有什么区别
前端·vue.js·面试
没有鸡汤吃不下饭1 小时前
解决vite+vue3运行项目打开页面跳转很慢打不开需要刷新问题:optimized dependencies change. reloading
前端·vue.js·vite
兜小糖的小秃毛2 小时前
el-Input输入数字自动转千分位进行展示
前端·javascript·vue.js
J总裁的小芒果2 小时前
el-table 自定义列、自定义数据
前端·javascript·vue.js
爱的叹息5 小时前
Vue 2 和 Vue 3 中 Vue 实例变量方法的功能差异对比,包含关键方法的详细说明和表格总结
前端·javascript·vue.js
肠胃炎5 小时前
Vue:mixin详解
前端·javascript·vue.js
北溟鱼鱼鱼5 小时前
组件通信方案总结
vue.js
前端大白话5 小时前
Vue3开发老踩坑?10个实战技巧助你突围
前端·javascript·vue.js
秋天的一阵风6 小时前
Webpack 插件开发:为 Vue.js 应用实现图片预加载
前端·vue.js·webpack
拖孩7 小时前
【Nova UI】十三、打造组件库之按钮组件(中):样式雕琢全攻略
前端·javascript·vue.js