Element-ui 自带的两种远程搜索(模糊查询)用法讲解

问题描述

有一种查询叫做前端远程搜索、模糊查询。饿了么自带两种方式可以做，一种是使用el-input中的el-autocomplete，另一种是使用el-select和el-option。这两种都可以选择，但是具体实现的思路方式要和后端商量。模糊查询是谁来做？

如果后端做

那么前端只需要把用户在输入框中的输入的关键字扔给后端，后端根据前端传过来的用户要查询的关键字，去数据库中进行模糊查询，查到的关联的数据扔给前端，前端拿到数据以后直接呈现给用户看到就行了。前端省事些

如果前端做

正常情况下，模糊查询其实后端做会多一些，因为假设用户输入了一个“王”字，想查询所有带“王”字的数据，如果数据库中有几万条数据，后端一次性把几万条数据扔给前端吗？前端再进行过滤、筛选、查找？这样前端会卡很久，同时数据不准确，因为在前端对后端返回来的数据进行过滤时，可能数据已经发生了改变等各种问题。但是也不是说前端就不能干。本文中分别介绍了饿了么自带的两种方式，我个人比较喜欢第二种方式。话不多说，上代码...

方式一

方式一效果图

输入 “孙” 这个字会出现相关联的数据，也就是模糊查询的意思

说实话，我个人喜欢用方式二。来人呐，上代码

方式二

方式二效果图

总结

两种都差不多，就是请求数据、拿数据、加工过滤数据、呈现数据。本文中的案例是，模糊查询过滤筛选数据是前端来做的，当然也可以让后端来做，具体做项目的时候，可以和后端商量。

到此这篇关于element-ui 自带的两种远程搜索(模糊查询)用法讲解的文章就介绍到这了,更多相关element-ui 模糊查询内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！