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

前端搬砖达人2024-01-19 10:04

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

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

这样子效果就出现了