详解element-ui 组件el-autocomplete使用踩坑记录

项目遇到一个比较麻烦的需求,保存用户填写的历史记录,项目使用的element-ui,自然就使用了el-autocomplete组件,然后就是各种踩坑,以下记录以下写代码过程中遇到的问题

createFilter(queryString, filed) {
      console.log("createFilter==" + queryString)
      return (item) => {
        switch (filed) {
          case 'cardNum':
            break
          case 'cardPass': case 'userPhone': case 'userName': case 'userCardId':
            return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
            break
          case 'mobile':
            return (item.phone.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
            break
          default:
            break
        }
      };
    },

1、下拉框高度修改:

el-autocomplete组件样式默认有一个最大高度,超出高度会滚动,如图显示的大概有7、8条的数据,需求要求展示10条所以只能修改组件样式。

如图可以看到有一个max-height属性,修改这个样式就可了,但是写了样式代码不起作用,组件修改了:popper-append-to-body="false"之后样式起作用了,原理不太清楚,哪位大神知道原因的麻烦告诉我一下,多谢

<style scoped lang="less">

  /deep/ .inline-input {
    /deep/ .el-scrollbar__wrap {
      max-height: 360px; /*no*/
    }
  }
</style>

2、一个页面有多个el-autocomplete组件,所以我需要传入使用这个组件的字段名,然后修改fetch-suggestions方法为

:fetch-suggestions="((queryString, cb)=>{queryFun(queryString, cb,'userName')})用闭包的方式多传入一个字段的入参

<el-form-item label="使用人姓名:" prop="userName" :rules="[{ required: true, message: '请填写信息!',trigger: ['blur', 'change'] },
    { pattern: /^[a-zA-Z\u4e00-\u9fa5]{2,20}$/, message: '请填写正确信息!',trigger: ['blur', 'change'] }]">
    <!-- <el-input @input="filterInput($event,'userName')" v-model="form.userName" autocomplete="off" maxlength="20"></el-input> -->
    <el-autocomplete @blur.stop="saveLocal($event.target.value,'userName')"     @input="filterInput($event,'userName')" class="inline-input" v-model="form.userName"     :fetch-suggestions="((queryString, cb)=>{queryFun(queryString, cb,'userName')})"     placeholder="请输入姓名" @select="((item)=>{handleSelect(item,'userName')})" :debounce=0 :popper-append-to-body="false">
  </el-autocomplete>
 </el-form-item>

3、需要保存的数据是校验通过后的数据,也就是输入完成blur之后再操作保存的逻辑,但是el-autocomplete组件blur事件不起作用,后查询资料说是因为click事件的优先级高于blur事件,所以要解决这个问题就解决事件冒泡问题,只需要使用vue的事件修饰符.stop就可以了,؏؏ᖗ乛◡乛ᖘ؏؏

@blur.stop="saveLocal($event.target.value,'userName')"

queryFun(queryString, cb, filed) {
      console.log(filed)
      let items = [];
      switch (filed) {
        case 'cardNum':
          break
        case 'cardPass':
          items = JSON.parse(localStorage.getItem("passHistory")) ? JSON.parse(localStorage.getItem("passHistory")) : [];
          break
        case 'userPhone':
          items = JSON.parse(localStorage.getItem("phoneHistory")) ? JSON.parse(localStorage.getItem("phoneHistory")) : [];
          break
        case 'userName':
          items = JSON.parse(localStorage.getItem("userNameHistory")) ? JSON.parse(localStorage.getItem("userNameHistory")) : [];
          break
        case 'mobile':
          break
        case 'userCardId':
          items = JSON.parse(localStorage.getItem("userCardIdHistory")) ? JSON.parse(localStorage.getItem("userCardIdHistory")) : [];
          break
        default:
          break
      }

      let results = queryString ? items.filter(this.createFilter(queryString, filed)) : items;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    }
createFilter(queryString, filed) {
      console.log("createFilter==" + queryString)
      return (item) => {
        switch (filed) {
          case 'cardNum':
            break
          case 'cardPass': case 'userPhone': case 'userName': case 'userCardId':
            return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
            break
          default:
            break
        }
      };
    },

4、第一次点击的时候会显示“请填写信息!”报错信息,再次点击选项就正常了,这个问题也是纠结了一阵儿,后来想起我的校验规则trigger 写的是‘blur’,下拉框应该触发change事件,修改为

trigger: ['blur', 'change'],解决

handleSelect(item, filed) {
      console.log(item);
      console.log("handleSelect==" + filed);
      let _this = this;
      switch (filed) {
        case 'cardNum':
          break
        case 'cardPass': case 'userPhone': case 'userName':
          _this.$set(_this.form, filed, item.value);
          break
        case 'userCardId':
          this.form.userCardId = item.userCardId;
          this.getAge(item.userCardId);
          break
        default:
          break
      }
    },

5、姓名禁止输入数字等使用input事件,将不符合正则的内容替换成空,代码如下

filterInput(e, filed) {
      console.log("filterInput=====")
      console.log(e)
      switch (filed) {
        case 'cardNum':
          this.form[filed] = e.replace(/[^\a-\z\A-\Z0-9]/g, '');
          this.form[filed] = this.form[filed].slice(0, 12);
          break
        case 'cardPass':
          this.form[filed] = e.replace(/[^\a-\z\A-\Z0-9]/g, '');
          this.form[filed] = this.form[filed].slice(0, 6);
          break
        case 'userPhone':
          this.form[filed] = e.replace(/[^0-9]/g, '');
          this.form[filed] = this.form[filed].slice(0, 11);
          break
        case 'userName':
          this.form[filed] = e.replace(/[^\a-\z\A-\Z\u4e00-\u9fa5]/g, '');
          this.form[filed] = this.form[filed].slice(0, 20);
          break
        case 'mobile':
          this.form[filed] = e.replace(/[^0-9]/g, '');
          this.form[filed] = this.form[filed].slice(0, 11);
          break
        case 'userCardId':
          this.form[filed] = e.replace(/[^0-9Xx]/g, '');
          this.form[filed] = this.form[filed].slice(0, 18);
          break
        default:
          this.form[filed] = e.replace(/[\u4e00-\u9fa5]/g, '');
          break
      }
      // this.saveLocal(this.form[filed], filed)
      this.$forceUpdate();
    },

6、校验通过后存储到localStorage,总觉得代码有点重复,不过改bug比较着急,大神有更好的写法,欢迎评论区留言

// 保存验证通过的信息
    saveLocal(val, filed) {
      var reg = "";
      switch (filed) {
        case 'cardNum':
          reg = /[0-9a-zA-Z]{12}/;
          if (reg.test(val)) {

            // 存储正确卡号到历史信息
            this.cardHistory.unshift({ "cardNum": val });
            // 历史消息去重
            var hash = {};
            this.cardHistory = this.cardHistory.reduce(function (item, next) {
              hash[next.cardNum] ? '' : hash[next.cardNum] = true && item.push(next);
              return item
            }, []);
            if (this.cardHistory.length > 10) {
              this.cardHistory.pop();
            }
            localStorage.setItem("cardList", JSON.stringify(this.cardHistory));
          }
          break
        case 'cardPass':
          reg = /[0-9a-zA-Z]{6}/;
          if (reg.test(val)) {
            // 存储正确卡号到历史信息
            this.passHistory.unshift({ "value": val });
            // 历史消息去重
            var hash = {};
            this.passHistory = this.passHistory.reduce(function (item, next) {
              hash[next.value] ? '' : hash[next.value] = true && item.push(next);
              return item
            }, []);
            if (this.passHistory.length > 10) {
              this.passHistory.pop();
            }
            localStorage.setItem("passHistory", JSON.stringify(this.passHistory));
          }
          break
        case 'userPhone':
          reg = /^1[3-9]\d{9}$/;
          if (reg.test(val)) {
            // 存储正确卡号到历史信息
            this.phoneHistory.unshift({ "value": val });
            // 历史消息去重
            var hash = {};
            this.phoneHistory = this.phoneHistory.reduce(function (item, next) {
              hash[next.value] ? '' : hash[next.value] = true && item.push(next);
              return item
            }, []);
            if (this.phoneHistory.length > 10) {
              this.phoneHistory.pop();
            }
            localStorage.setItem("phoneHistory", JSON.stringify(this.phoneHistory));
          }
          break
        case 'userName':
          reg = /^[a-zA-Z\u4e00-\u9fa5]{2,20}$/;
          if (reg.test(val)) {
            // 存储正确卡号到历史信息
            this.userNameHistory.unshift({ "value": val });
            // 历史消息去重
            var hash = {};
            this.userNameHistory = this.userNameHistory.reduce(function (item, next) {
              hash[next.value] ? '' : hash[next.value] = true && item.push(next);
              return item
            }, []);
            if (this.userNameHistory.length > 10) {
              this.userNameHistory.pop();
            }
            localStorage.setItem("userNameHistory", JSON.stringify(this.userNameHistory));
          }
          break
        case 'mobile':
          break
        case 'userCardId':
          reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
          if (reg.test(val)) {
            // 存储正确卡号到历史信息
            this.userCardIdHistory.unshift({ "value": val });
            // 历史消息去重
            var hash = {};
            this.userCardIdHistory = this.userCardIdHistory.reduce(function (item, next) {
              hash[next.value] ? '' : hash[next.value] = true && item.push(next);
              return item
            }, []);
            if (this.userCardIdHistory.length > 10) {
              this.userCardIdHistory.pop();
            }
            localStorage.setItem("userCardIdHistory", JSON.stringify(this.userCardIdHistory));
          }
          break
        default:
          break
      }
    },

到此这篇关于详解element-ui 组件el-autocomplete使用踩坑记录的文章就介绍到这了,更多相关element组件el-autocomplete使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

    官网的demo献上 在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据 官网中的数据list都是写在loadAll()中的,而如果我们此时要用到mock的数据就要在此基础上对代码进行修改. -mock数据的获取- 我们要获取远程mock中所有学生的学号信息,根据输入的数据来远程查找目标,并且在选中该目标后能够自动填充对应的姓名.生日.手机等信息,实现快速获取信息的功能,再也不用手动一个个去输入所有的数据啦- 在template中添加el-autocomplete <e

  • element带输入建议el-autocomplete的使用

    目录 引用el-autocomplete 触发带输入建议的两种方式 转成输入建议回调的数据结构 增加回车触发事件 解决回车后建议输入框没消失的bug vue+element UI element UI的带输入建议官方文档:https://element.eleme.cn/#/zh-CN/component/input 建议先看官方文档,这里是官方文档的适当补充 引用el-autocomplete 1.在需要的地方引用 <el-autocomplete       class="inline

  • 基于Vue el-autocomplete 实现类似百度搜索框功能

    效果图如下所示: 首先上代码 <template> <div class="assets-search height-all"> <div class="search-layout"> <div class="search-title">让数据触手可及</div> <div class="search-input-layout"> <!--<e

  • 详解vue-class迁移vite的一次踩坑记录

    目录 what happen 探究 解决 总结 what happen 最进项目从 vue-cli 迁移到了 vite,因为是 vue2 的项目,使用了 vue-class-component类组件做 ts 支持.当然迁移过程并没有那么一帆风顺,浏览器控制台报了一堆错,大致意思是某某方法为 undefined,无法调用.打印了下当前 this,为 undefined 的方法都来自于 vuex-class 装饰器下的方法.这就是一件很神奇的事,为什么只有 vuex-class 装饰器下的方法才会为

  • 微信小程序组件生命周期的踩坑记录

    组件生命周期,通常是我们业务逻辑开始的地方. 如果业务场景比较复杂,组件生命周期有不符合预期的表现时, 可能会导致一些诡异的业务bug,它们极难复现和修复. 组件 attached 生命周期执行次数 按照通常的理解,除moved/show/hide等生命周期可能多次执行外, 严格意义上与组件加载相关的生命周期,如:created.attached.ready等,每个组件实例应该只执行一次.但是事实真的如此吗? 背景 这个问题的发现,源于我们在小程序的报错日志中, 收到大量类似Cannot red

  • 详解webpack import()动态加载模块踩坑

    import webpack根据ES2015 loader 规范实现了用于动态加载的import()方法. 这个功能可以实现按需加载我们的代码,并且使用了promise式的回调,获取加载的包. 在代码中所有被import()的模块,都将打成一个单独的包,放在chunk存储的目录下.在浏览器运行到这一行代码时,就会自动请求这个资源,实现异步加载. 这里是一个简单的demo. import('lodash').then(_ => { // Do something with lodash (a.k.

  • 详解element上传组件before-remove钩子问题解决

    应公司业务要求已上传文件删除前提醒确认代码如下 if(file && file.status === "success"){ return this.$confirm('此操作将永久删除该文件, 是否继续?', '系统提示',{ confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', center: true }).then(() => { this.$message({ type: 's

  • 详解element-ui 组件el-autocomplete使用踩坑记录

    项目遇到一个比较麻烦的需求,保存用户填写的历史记录,项目使用的element-ui,自然就使用了el-autocomplete组件,然后就是各种踩坑,以下记录以下写代码过程中遇到的问题 createFilter(queryString, filed) { console.log("createFilter==" + queryString) return (item) => { switch (filed) { case 'cardNum': break case 'cardPa

  • 详解Vue的组件中data选项为什么必须是函数

    官方解释 data 必须是函数 构造 Vue 实例时传入的各种选项大多数都可以在组件里使用.只有一个例外:data 必须是函数.实际上,如果你这么做: Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' } }) 那么 Vue 会停止运行,并在控制台发出警告,告诉你在组件实例中 data 必须是一个函数.但理解这种规则为何存在也是很有益处的,

  • 详解Angular-cli生成组件修改css成less或sass的实例

    详解Angular-cli生成组件修改css成less或sass的实例 使用cli命令生成组件: ng generate component 组件名 生成出来的组件文件有:html / ts / css / spec.ts 问题我是一个less重度患者怎么可能再去写css呢. 于是我就在想使用cli生成组件的时候能直接生成出来的是less文件而不是css文件: 修改angular-cli.json文件: apps "styles": [ "styles.less"

  • 详解vue 模版组件的三种用法

    本文介绍了详解vue 模版组件的三种用法,分享给大家,具体如下: 第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p&

  • 使用vue-cli导入Element UI组件的方法

    首先第一步,现在命令行中输入npm i element-ui,如: 接着在mian.js 中添加 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 如:=> 最后在命令行输入npm run dev打开自己创建的项目就可以使用了 总结 以上所述是小编给大家介绍的使用vue-cli导入Element UI组件的方法,希望对大家有所帮助,如果大家有任何疑

  • 详解vue父子组件状态同步的最佳方式

    哈喽!大家好!我是木瓜太香,一位老牌儿前端工程师,平时我们在使用 vue 开发的时候,可能会遇到需要父组件与子组件某个状态需要同步的情况,通常这个是因为我们封装组件的时候有一个相同的状态外面要用,里面也要用,今天我们就来看看怎么优雅的解决这个问题吧! 一般来说我们实现这个功能,只需要父组件通过 props 传递给子组件就好了,但是理想很丰满,现实很骨感,如果我们直接在子组件更改传进来的 props ,不出意外浏览器会给你一坨大红色的报错,因为在 vue 中我们的数据流动是自上而下的,而子组件直接

随机推荐