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

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

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

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

效果如下:
vue el-select自定义搜索选择案例_第1张图片
话不多说上代码:

生成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, ",");
    },

自定义搜索函数


   
   
 
 // 自定义搜索 
    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()
    },

这样子效果就出现了

你可能感兴趣的:(vue.js,前端,javascript,elementui)