el-autocomplete用法,element autocomplete
最近使用了埃尔-自动完成组件，本文主要介绍了元素-用户界面组件埃尔-自动完成使用踩坑记录，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
项目遇到一个比较麻烦的需求，保存用户填写的历史记录，项目使用的元素-ui，自然就使用了埃尔-自动完成组件，然后就是各种踩坑，以下记录以下写代码过程中遇到的问题
createFilter(queryString，filed) {
控制台。日志( create filter==查询字符串)
退货（项目)={
开关（现场){
案例" cardNum ":
破裂
大小写“一卡通”:大小写“用户电话”:大小写“用户名”:大小写"用户卡Id ":
return (item.value.toLowerCase().(查询字符串的索引。tolowercase())！==-1);
破裂
案例"移动":
return (item.phone.toLowerCase().(查询字符串的索引。tolowercase())！==-1);
破裂
默认值：
破裂
}
};
},
1、下拉框高度修改：
埃尔-自动完成组件样式默认有一个最大高度，超出高度会滚动，如图显示的大概有7、8条的数据，需求要求展示10条所以只能修改组件样式。
如图可以看到有一个最大高度属性，修改这个样式就可了，但是写了样式代码不起作用，组件修改了：popper-append-to-body=false 之后样式起作用了，原理不太清楚，哪位大神知道原因的麻烦告诉我一下，多谢
样式范围语言=少
/深/。内嵌输入{
/深/。埃尔滚动条_ _换行{
max-height:360 px；/*否*/
}
}
/风格
2、一个页面有多个埃尔-自动完成组件，所以我需要传入使用这个组件的字段名，然后修改获取建议方法为
:fetch-suggestions=((查询字符串，cb)={queryFun(查询字符串，cb，用户名)})用闭包的方式多传入一个字段的入参
El-表单-项目标签=使用人姓名： prop= userName :rules=[{ required:true，message:请填写信息！触发器：[模糊,改变] },
{图案：/^[a-za-z\u4e00-\u9fa5]{2,20}$/，消息： 请填写正确信息!,触发器：[blur ， change] }]
！-El-input @ input= filter input($ event， userName ) v-model=形式。用户名 autocomplete= off maxlength= 20 /El-input-
El-自动完成@ blur。stop=保存本地(event。目标。value， userName ) @ input= filter input($ event， userName ) class= inline-input v-model=形式。 userName :fetch-suggestions=((查询字符串，cb)={queryFun(查询字符串，cb， userName ) placeholder=请输入姓名@ select=((item)={ handle select(item， userName )}):de bounce=0:popper-append-to-body= false
/El-自动完成
/El-表单-项目
3、需要保存的数据是校验通过后的数据，也就是输入完成虚化之后再操作保存的逻辑，但是埃尔-自动完成组件虚化事件不起作用，后查询资料说是因为点击事件的优先级高于虚化事件，所以要解决这个问题就解决事件冒泡问题，只需要使用某视频剪辑软件的事件修饰符。停止就可以了，乛乛
@模糊。stop=保存本地(event。目标。值，用户名)
queryFun(queryString，cb，filed) {
console.log(已归档)
let items=[]；
开关（现场){
案例" cardNum ":
破裂
案例“一卡通”:
items=JSON。解析(本地存储。getitem( pass history )？JSON。解析(本地存储。getitem( pass history ):[]；
破裂
案例"用户电话":
items=JSON。解析(本地存储。getitem(电话历史)？JSON。解析(本地存储。getitem(电话历史):[]；
破裂
案例"用户名":
items=JSON。解析(本地存储。getitem(用户名历史)？JSON。解析(本地存储。getitem(用户名历史):[]；
破裂
案例"移动":
破裂
案例"用户卡Id”:
items=JSON。解析(本地存储。getitem( userCardIdHistory )？JSON。解析(本地存储。getitem( userCardIdHistory ):[]；
破裂
默认值：
破裂
}
let results=queryString？项目。过滤(这个。创建过滤器(查询字符串，字段)):项目；
清除超时(这。暂停)；
this.timeout=setTimeout(()={
cb(成绩);
}，3000 *数学。random())；
}
createFilter(queryString，filed) {
控制台。日志( create filter==查询字符串)
退货（项目)={
开关（现场){
案例" cardNum ":
破裂
大小写“一卡通”:大小写“用户电话”:大小写“用户名”:大小写"用户卡Id ":
return (item.value.toLowerCase().(查询字符串的索引。tolowercase())！==-1);
破裂
默认值：
破裂
}
};
},
4、第一次点击的时候会显示"请填写信息!"报错信息，再次点击选项就正常了，这个问题也是纠结了一阵儿，后来想起我的校验规则引发写的是模糊，下拉框应该触发变化事件，修改为
触发器：[模糊,改变],解决
手柄选择(项目，已归档){
控制台。日志(项目)；
console.log(handleSelect==字段);
让这个=这个
开关（现场){
案例" cardNum ":
破裂
大小写“一卡通”:大小写“用户电话”:大小写“用户名”:
_这个. set(_this.form，filed，item。值)；
破裂
案例"用户卡Id”:
这个。形式。用户卡id=项目。用户cardid
这个。getage(项目。用户cardid)；
破裂
默认值：
破裂
}
},
5、姓名禁止输入数字等使用投入事件，将不符合正则的内容替换成空，代码如下
filterInput(e，filed) {
console.log(filterInput====)
console.log(e)
开关（现场){
案例" cardNum ":
这个。形式[归档]=e.replace(/[^\a-\z\a-\z0-9]/g, )；
这份表格[已归档]。slice(0，12)；
破裂
案例“一卡通”:
这个。形式[归档]=e.replace(/[^\a-\z\a-\z0-9]/g, )；
这份表格[已归档]。slice(0，6)；
破裂
案例"用户电话":
这个。形式[归档]=e.replace(/[^0-9]/g, )；
这份表格[已归档]。slice(0，11)；
破裂
案例"用户名":
这个。形式[归档]=e.replace(/[^\a-\z\a-\z\u4e00-\u9fa5]/g, )；
这份表格[已归档]。slice(0，20)；
破裂
案例"移动":
这个。形式[归档]=e.replace(/[^0-9]/g, )；
这份表格[已归档]。slice(0，11)；
破裂
案例"用户卡Id”:
这个。形式[归档]=e.replace(/[^0-9xx]/g, )；
这份表格[已归档]。slice(0，18)；
破裂
默认值：
这个。form[filed]=e . replace(/[\ u4e 00-\ u9fa 5]/g， )；
破裂
}
//这个。保存本地(这个。表格[已归档],已归档)
这个. force update()；
},
6、校验通过后存储到本地存储，总觉得代码有点重复，不过改病菌比较着急，大神有更好的写法，欢迎评论区留言
//保存验证通过的信息
saveLocal(val，filed) {
var reg=
开关（现场){
案例" cardNum ":
reg=/[0-9a-zA-Z]{ 12 }/；
如果(注册测试(val)) {
//存储正确卡号到历史信息
这个。卡片历史。un shift({ card num :val })；
//历史消息去重
var hash={ }；
这个。卡历史=这个。卡片历史。减少(功能(项目，下一个){
hash[next.cardNum]？哈希[下一个。卡号]=真实项目。推(下一个)；
退货项目
}, []);
if (this.cardHistory.length 10) {
这个。卡片历史。pop()；
}
localStorage.setItem(cardList ，JSON。stringify(这个。卡历史))；
}
破裂
案例“一卡通”:
reg=/[0-9a-zA-Z]{ 6 }/；
如果(注册测试(val)) {
//存储正确卡号到历史信息
这个。通过历史。un shift({ value :val })；
//历史消息去重
var hash={ }；
这个。传历史=这个。通过历史。减少(功能(项目，下一个){
hash[next.value]？哈希[下一个。值]=真项。推(下一个)；
退货项目
}, []);
if (this.passHistory.length 10) {
这个。通过历史。pop()；
}
本地存储。setitem( pass history ，JSON。stringify(这个。通过历史))；
}
破裂
案例"用户电话":
reg=/^1[3-9]\d{9}$/；
如果(注册测试(val)) {
//存储正确卡号到历史信息
这个。电话记录。un shift({ value :val })；
//历史消息去重
var hash={ }；
这个。电话记录=这个。电话记录。减少(功能(项目，下一个){
hash[next.value]？哈希[下一个。值]=真项。推(下一个)；
退货项目
}, []);
如果(这个。电话记录。长度10){
这个。电话记录。pop()；
}
本地存储。setitem(电话记录，JSON。stringify(这个。电话记录))；
}
破裂
案例"用户名":
reg=/^[a-za-z\u4e00-\u9fa5]{2,20}$/；
如果(注册测试(val)) {
//存储正确卡号到历史信息
这个。用户名历史。un shift({ value :val })；
//历史消息去重
var hash={ }；
这个。用户名历史=this。用户名历史。减少(功能(项目，下一个){
hash[next.value]？哈希[下一个。值]=真项。推(下一个)；
退货项目
}, []);
如果(这个。用户名历史。长度10){
这个。用户名历史。pop()；
}
本地存储。setitem(用户名历史，JSON。stringify(这个。用户名历史))；
}
破裂
案例"移动":
破裂
案例"用户卡Id”:
reg=/^[1-9]\d{5}(181920)\d{2}((0[1-9])(1[0-2]))(([0-2][1-9])10203031)\d{3}[0-9xx]$/；
如果(注册测试(val)) {
//存储正确卡号到历史信息
这个。usercardidhistory。un shift({ value :val })；
//历史消息去重
var hash={ }；
这个。usercardidhistory=this。usercardidhistory。减少(功能(项目，下一个){
hash[next.value]？哈希[下一个。值]=真项。推(下一个)；
退货项目
}, []);
如果(这个。usercardidhistory。长度10){
这个。usercardidhistory。pop()；
}
本地存储。setitem( userCardIdHistory)，JSON。stringify(这个。userCardIdHistory))；
}
破裂
默认值：
破裂
}
},
到此这篇关于详解元素-用户界面组件埃尔-自动完成使用踩坑记录的文章就介绍到这了，更多相关元素组件埃尔-自动完成使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。