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

这样子效果就出现了

相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互