再次记录一个非常的无语的bug,el-autocomplete验证规则出不来的问题

在项目中使用el-autocomplete组件时遇到了两个问题:1. 只有输入候选项的第一个汉字才有联想结果,通过修改比较条件解决。2. el-form-item的验证规则不起作用,发现原因是v-model绑定数据未与el-form关联。修复这些问题后提高了用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前提

项目在交由客户试用一段时间后,因为el-select下拉框数据太多,选择起来太过费时费力,所以提出修改,希望可以修改成类似百度搜索那种,可以在输入一个字后,有联想结果的那种,听到这个需求的时候,我立刻想起了el-autocomplete这个组件。

遇到的问题

问题1:只有输入候选项的第一个汉字,才有联想结果

解决方法:

将原代码中的toLowerCase()) === 0改成toLowerCase())  >  -1  即可解决该问题。

原代码:

createFilter(queryString) {
    return (restaurant) => {
    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};

修改后的代码:

createFilter(queryString) {
    return (restaurant) => {
    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
};

这样经过修改之后,随便输入候选项中的任何一个字,不管是开头、结尾还是中间,都可以联想到有这个字的候选项,非常nice。

问题2:给el-form-item添加验证规则完全不起作用

解决

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值