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

问题描述

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

如果后端做

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

如果前端做

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

方式一

方式一效果图

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

v-model="value"

filterable

remote

placeholder="请输入关键词"

:remote-method="remoteMethod"

:loading="loading"

>

v-for="item in options"

:key="item.value"

:label="item.label"

:v