Vue项目中使用ElementUI的el-autocomplete小结

港控/mmm° 2022-10-12 01:06 534阅读 0赞

在项目中使用ElementUI的el-autocomplete时，参照了官方文档的代码，结果发现无法使用。现在通过对代码进行调整，总结如下：

ElementUI中，el-autocomplete组件是一个拥有输入建议的输入框。该组件的基础用法如下：

<el-autocomplete v-model="newGroupId" class="inline-input" :fetch-suggestions="queryGroupId" placeholder="请输入用户组Id" style="width: 180px;" :debounce="0" ></el-autocomplete>

该组件在使用时，有很多需要注意的坑。对于需要注意的事项现总结如下：

（1）输入建议会通过:fetch-suggestions返回结果，其返回数据的结构是如下形式：

[{  "value": "xxx"}]

（2）通过实时输入去判定的建议，将由:fetch-suggestions后的methods决定。

queryGroupId(queryString, cb) { 
      const options = this.options;
      const results = queryString ? options.filter(this.createFilterGroupId(queryString)) : options;
      cb(results);
    },
    createFilterGroupId(queryString) { 
      return (options) => { 
        return (options.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    }

也就是说，这里的options一定是根据（1）的形式来创建的。随后就可根据这些写在methods里的方法去进行筛选返回。

（3）在使用该组件的过程中发现，即使第一时间就对输入建议的数组进行了修改，但是在点击输入框时，还是会先展示之前的输入建议，经过数据刷新闪烁后，才会显示新的输入建议。为了解决这个问题需要使用debounce参数。debounce参数默认是300ms，也就是触发输入建议300ms后才会从数据库获取数据，这样就会造成输入框刷新两次的假象。将debounce设置为0或一个比较小的数即可解决这个问题。