vue el-select自定义搜索选择案例

开发中常见的有选择框并且输入关键词可以快速检索功能,刚好这次项目需求,就开始吧

需求:1、生成1000到100000的数可选择,递增1000 2、这些数必须三位数用逗号隔开,比如1,000.00这样的形式显示 3、输入关键词比如10,得出现相关得搜索建议,比如 1000 10000 11000

难点:生成1000到100000的数可选择,递增1000,这些数必须三位数用逗号隔开,自定义搜索显示的数和实际搜索出的数组不一致,需分开,搜索后点击选择后,再次点中搜索框,所有的数据必须都在(这是难点,搞了好久)

效果如下:

话不多说上代码:

生成1000到100000的数可选择,递增1000,这些数必须三位数用逗号隔开,比如1,000.00这样的形式显示

因为el-select的数据模式是value和label形式,value就是选择的实际值,lable是展示

复制代码
 generateArray() {
      const start = 1000; // 开始值
      const end = 500000; // 结束值
      const array = [];
      for (let i = start; i <= end; i += 1000) {
        const formattedValue = this.numberWithCommas(i.toFixed(2));
        const item = {
          value: i.toString(),
          label: formattedValue,
        };
        array.push(item);
      }
      return array;
    },
    //金额加逗号 三位
    numberWithCommas(value) {
      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },

自定义搜索函数

复制代码
<el-select
  v-model="money"
 placeholder="请选择"
   style="width: 80%"
   clearable
   filterable 
   :filter-method="handleFilter"
   @change="changeMoney"
   @focus="handleFocus"
   @visible-change="handleVisibleChange"
 >
   <el-option
     v-for="item in MoneyOptions"
     :key="item.value"
     :label="item.label"
     :value="item.value"
   >
   </el-option>
 </el-select>
 // 自定义搜索 
    handleFilter(query) { 
      this.MoneyOptions= this.options.filter((item) => {
          // 这里是用的value选项筛选,默认是label
          return item.value.indexOf(query) > -1;
      });
    },

输入关键词后,不选择,再次点击搜索框,需要把所有的数据都展示出来

这里用到el-select的focus和visible-change和change方法,点中时把数据恢复

复制代码
// 恢复数据
    handleFocus() {
      this.MoneyOptions= [...this.options]
    },
    handleVisibleChange(visible){
      if(!visible){
        this.handleFocus()
      }
    },
    changeMoney(){
      this.handleFocus()
    },

这样子效果就出现了

相关推荐
JSLove4 分钟前
常见 npm 报错问题
前端·npm
sunbyte4 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子5 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
知性的小mahua9 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
markyankee1019 分钟前
Vue 计算属性和侦听器详解
vue.js
嘗_25 分钟前
暑期前端训练day5
前端
uncleTom66631 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥34 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF1 小时前
如何 测试Labview是否返回数据 ?
前端
Spider_Man1 小时前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm