您的当前位置:首页正文

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

2020-08-06 来源:客趣旅游网
Element-ui⾃带的两种远程搜索(模糊查询)⽤法讲解

问题描述

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

如果后端做

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

如果前端做

正常情况下,模糊查询其实后端做会多⼀些,因为假设⽤户输⼊了⼀个“王”字,想查询所有带“王”字的数据,如果数据库中有⼏万条数据,后端⼀次性把⼏万条数据扔给前端吗?前端再进⾏过滤、筛选、查找?这样前端会卡很久,同时数据不准确,因为在前端对后端返回来的数据进⾏过滤时,可能数据已经发⽣了改变等各种问题。但是也不是说前端就不能⼲。本⽂中分别介绍了饿了么⾃带的两种⽅式,我个⼈⽐较喜欢第⼆种⽅式。话不多说,上代码...

⽅式⼀

⽅式⼀效果图

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

说实话,我个⼈喜欢⽤⽅式⼆。来⼈呐,上代码

⽅式⼆

⽅式⼆效果图

总结

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

到此这篇关于Element-ui ⾃带的两种远程搜索(模糊查询)⽤法讲解的⽂章就介绍到这了,更多相关Element-ui 模糊查询内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持!

因篇幅问题不能全部显示,请点此查看更多更全内容