【element】el-autocomplete的常见用法

2023-12-11 19:30

本文主要是介绍【element】el-autocomplete的常见用法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言:

这段时间突然发现很少写博客了,平时都在平衡工作和休息的时间,周末也没动过笔,而且更重要的是我找不到写的内容了,在经历的初始的新知识的学习阶段后,目前的阶段更加转入对于业务的理解,很多模块在不同项目中都是可以复用的。
而且工作中发现开发并不强求特别酷炫的界面效果,更多的是实用的数据展示,因此button,form,table可以说是最常用的,因此后面可能会用更多的篇幅去说这块内容的知识。

一、组件介绍

autocomplete是input组件的一个分支,专门用来处理模糊匹配的相关知识,很多时候用户希望输入一个单词就可以自动匹配到相关的内容,这时候就是这个组件发挥作用的地方了。
官网对此也有介绍
在这里也能看到官网的相关介绍

二、基本原理

在这里插入图片描述
将输入的名称与字典库进行匹配,然后输出成功字段。
这里的匹配时存在两种情况,一种是通过后端接口进行匹配,一种是前端进行匹配,我的感觉是如果是少量的数据可以交给前端,如果数据量过大可能后端匹配完了再输出比较好。

三、具体实现

  • 【后端实现法】
    因为涉及到接口所以只会说一下流程,重点介绍前端实现。
    在这里插入图片描述
    在这里插入图片描述

后端匹配不需要获取字典,你只需要把前端输入字符传给后端,等后端匹配好后把结果给你,然后你再将结果返回到页面就好了。
(querySearch, cb)是固定格式,前者代表输入的字段,后者是个方法,代表输出的结果


  • 【前端实现法】
    前端实现的页面样式与后端一样,这里请求的@Select是为了处理选择后的结果在这里插入图片描述
    在这里插入图片描述

因为是前端自己处理,所以需要先获取总字典序,将其存储在一个变量里面

在这里插入图片描述

这样可以一进入页面就处理好总字典的内容。

在这里插入图片描述

具体要讲一下这个querySearch方法中可实现的内容

  • if--else判断是看你想不想要用户不输入内容也进行匹配,如果默认用户输入内容才开始匹配,就只要if内的内容就好(我这里是不输入也会匹配)
    在这里插入图片描述
  • 上文以及提到cb()中输出返回的结果,这里results变量就是你想返回的结果,具体如何根据你的匹配方法决定,一般都是输入一个字符返回匹配到的结果,但是也可以不这么匹配.
    在这里插入图片描述
    实现原理是之前定义的list里面有labelname字段,你可以处理用户输入的时候按name字段,输出的是label字段,这样就实现了中英文匹配的情况.
  • 需要注意的是匹配的结果results中的value字段才会在页面上展示,如果你最后返回的list没有这个字段,页面上是不会展示内容的,这也让前端可以实现自定义展示.
    在这里插入图片描述
    在这里插入图片描述
  • 最后想说明的是匹配的方法,有首字母的匹配以及模糊匹配,首字母的就是从头开始,如果第一个字符不匹配就放弃,模糊的是如果整个字符串有能匹配的字段都会输出,具体情况可以看演示.
    首字母匹配
    在这里插入图片描述
    模糊匹配
    在这里插入图片描述
    具体方法我已经封装了,这里忽略大小写
    在这里插入图片描述

在这里插入图片描述

handleSelect主要用来处理选中后的结果,如果不处理默认就是list表中的内容
在这里插入图片描述

四、源码

<template><div class="autoComplete"><el-form style="margin:30px" label-width="180px" label-position="right"><el-form-item label="后端进行搜索并匹配:"><el-autocomplete placeholder="请输入匹配内容" v-model="matchName" :fetch-suggestions="querySearchAsync"></el-autocomplete></el-form-item><el-form-item label="前端自行匹配:"><el-autocomplete placeholder="请输入匹配内容" v-model="searchName" :fetch-suggestions="querySearch" @select="handleSelect"></el-autocomplete></el-form-item></el-form></div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'export default {setup () {const { proxy } = getCurrentInstance()const searchName = ref('')const matchName = ref('')const totalData = ref([])let timeOut = reactive()/**获取总查询表信息 */const getList = () => {try {// 这里应该请求接口totalData.value = list} catch (error) {proxy.$message.error(error.message)}}/**搜索结果 */const querySearch = (querySearch, cb) => {let results = []if (querySearch) {const findout = totalData.value.filter((x) => nameFilter(x, querySearch))results = findout.map(x => ({ ...x, value: x.label }))} else {results = totalData.value.map(x => ({ ...x, value: x.label }))}console.log(results, '结果')clearTimeout(timeOut)timeOut = setTimeout(() => {cb(results)}, 1000);}/**选择的结果 */const handleSelect = (item) => {console.log(item, '选择结果')searchName.value = "[label:" + item.label + "; name:" + item.name + "]"}/**模糊匹配方法 */const nameFilter = (item, querySearch) => {return item.label.toLowerCase().match(querySearch.toLowerCase()) ? true : false}/**首字母匹配法 */const firstCharFilter = (item, querySearch) =>item.label.toLowerCase().indexOf(querySearch.toLowerCase()) === 0/**请求后端接口检索 */const querySearchAsync = (querySearch, cb) => {let results = []if (querySearch === '') {cb(results)} else {try {// 请求接口const res = []results = rescb(results)} catch (error) {proxy.$message.error(error.message)}}}onMounted(() => {getList()})const list = [{ id: 101, label: "angle", name: "角;角度" },{ id: 102, label: "ant", name: "蚂蚁" },{ id: 103, label: "apple", name: "苹果" },{ id: 104, label: "arch", name: "拱形;弧形" },{ id: 105, label: "arm", name: "臂" },{ id: 106, label: "army", name: "军队" },{ id: 107, label: "baby", name: "婴儿" },{ id: 108, label: "bag", name: "袋" },{ id: 109, label: "ball", name: "球" },{ id: 122, label: "bone", name: "骨" },{ id: 123, label: "book", name: "书" },{ id: 124, label: "boot", name: "靴" },{ id: 125, label: "bottle", name: "瓶子" },{ id: 126, label: "box", name: "箱;盒" },{ id: 127, label: "boy", name: "男孩" },{ id: 128, label: "brain", name: "脑" },{ id: 129, label: "brake", name: "煞车" },{ id: 130, label: "branch", name: "树枝" },{ id: 131, label: "brick", name: "砖" },{ id: 132, label: "bridge", name: "桥" },{ id: 133, label: "brush", name: "刷子" },{ id: 134, label: "bucket", name: "水桶" },{ id: 135, label: "bulb", name: "球茎;灯泡" },{ id: 136, label: "button", name: "纽扣" },{ id: 150, label: "clock", name: "时钟" },{ id: 151, label: "cloud", name: "云" },{ id: 152, label: "coat", name: "外套,大衣" },{ id: 153, label: "collar", name: "衣领" },{ id: 154, label: "comb", name: "梳子" },{ id: 155, label: "cord", name: "绳子" },{ id: 156, label: "cow", name: "母牛" },{ id: 157, label: "cup", name: "杯子" },{ id: 158, label: "curtain", name: "帘;幕" },{ id: 159, label: "cushion", name: "垫子" },{ id: 160, label: "dog", name: "狗" },{ id: 169, label: "eye", name: "眼睛" },]return {searchName,matchName,querySearch,handleSelect,querySearchAsync}}
}</script>

这篇关于【element】el-autocomplete的常见用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/481849

相关文章

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

Java 方法重载Overload常见误区及注意事项

《Java方法重载Overload常见误区及注意事项》Java方法重载允许同一类中同名方法通过参数类型、数量、顺序差异实现功能扩展,提升代码灵活性,核心条件为参数列表不同,不涉及返回类型、访问修饰符... 目录Java 方法重载(Overload)详解一、方法重载的核心条件二、构成方法重载的具体情况三、不构

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

Python中反转字符串的常见方法小结

《Python中反转字符串的常见方法小结》在Python中,字符串对象没有内置的反转方法,然而,在实际开发中,我们经常会遇到需要反转字符串的场景,比如处理回文字符串、文本加密等,因此,掌握如何在Pyt... 目录python中反转字符串的方法技术背景实现步骤1. 使用切片2. 使用 reversed() 函

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

Python中你不知道的gzip高级用法分享

《Python中你不知道的gzip高级用法分享》在当今大数据时代,数据存储和传输成本已成为每个开发者必须考虑的问题,Python内置的gzip模块提供了一种简单高效的解决方案,下面小编就来和大家详细讲... 目录前言:为什么数据压缩如此重要1. gzip 模块基础介绍2. 基本压缩与解压缩操作2.1 压缩文

解读GC日志中的各项指标用法

《解读GC日志中的各项指标用法》:本文主要介绍GC日志中的各项指标用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、基础 GC 日志格式(以 G1 为例)1. Minor GC 日志2. Full GC 日志二、关键指标解析1. GC 类型与触发原因2. 堆

Python中win32包的安装及常见用途介绍

《Python中win32包的安装及常见用途介绍》在Windows环境下,PythonWin32模块通常随Python安装包一起安装,:本文主要介绍Python中win32包的安装及常见用途的相关... 目录前言主要组件安装方法常见用途1. 操作Windows注册表2. 操作Windows服务3. 窗口操作

MySQL数据库中ENUM的用法是什么详解

《MySQL数据库中ENUM的用法是什么详解》ENUM是一个字符串对象,用于指定一组预定义的值,并可在创建表时使用,下面:本文主要介绍MySQL数据库中ENUM的用法是什么的相关资料,文中通过代码... 目录mysql 中 ENUM 的用法一、ENUM 的定义与语法二、ENUM 的特点三、ENUM 的用法1

JavaSE正则表达式用法总结大全

《JavaSE正则表达式用法总结大全》正则表达式就是由一些特定的字符组成,代表的是一个规则,:本文主要介绍JavaSE正则表达式用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录常用的正则表达式匹配符正则表China编程达式常用的类Pattern类Matcher类PatternSynta