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()
    },

这样子效果就出现了

相关推荐
daols884 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue