【element】el-autocomplete的常见用法

2023-12-11 19:30
文章标签 常见 用法 el element autocomplete

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

前言：

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

一、组件介绍

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

二、基本原理

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

三、具体实现

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

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

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

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

在这里插入图片描述

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

在这里插入图片描述

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

  • if--else判断是看你想不想要用户不输入内容也进行匹配,如果默认用户输入内容才开始匹配,就只要if内的内容就好(我这里是不输入也会匹配)
    在这里插入图片描述
  • 上文以及提到cb()中输出返回的结果,这里results变量就是你想返回的结果,具体如何根据你的匹配方法决定,一般都是输入一个字符返回匹配到的结果,但是也可以不这么匹配.
    在这里插入图片描述
    实现原理是之前定义的list里面有label和name字段,你可以处理用户输入的时候按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的常见用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

原文地址:https://blog.csdn.net/qq_41443611/article/details/124320151
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/481849。

相关文章

前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
C++ vector的常见用法超详细讲解

C++ vector的常见用法超详细讲解

《C++vector的常见用法超详细讲解》：本文主要介绍C++vector的常见用法,包括C++中vector容器的定义、初始化方法、访问元素、常用函数及其时间复杂度,通过代码介绍的非常详细,... 目录1、vector的定义2、vector常用初始化方法1、使编程用花括号直接赋值2、使用圆括号赋值3、ve
阅读更多...
MySQL中FIND_IN_SET函数与INSTR函数用法解析

MySQL中FIND_IN_SET函数与INSTR函数用法解析

《MySQL中FIND_IN_SET函数与INSTR函数用法解析》：本文主要介绍MySQL中FIND_IN_SET函数与INSTR函数用法解析,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一... 目录一、功能定义与语法1、FIND_IN_SET函数2、INSTR函数二、本质区别对比三、实际场景案例分
阅读更多...
Pytest多环境切换的常见方法介绍

Pytest多环境切换的常见方法介绍

《Pytest多环境切换的常见方法介绍》Pytest作为自动化测试的主力框架,如何实现本地、测试、预发、生产环境的灵活切换,本文总结了通过pytest框架实现自由环境切换的几种方法,大家可以根据需要进... 目录1.pytest-base-url2.hooks函数3.yml和fixture结论你是否也遇到过
阅读更多...
pytorch之torch.flatten()和torch.nn.Flatten()的用法

pytorch之torch.flatten()和torch.nn.Flatten()的用法

《pytorch之torch.flatten()和torch.nn.Flatten()的用法》：本文主要介绍pytorch之torch.flatten()和torch.nn.Flatten()的用... 目录torch.flatten()和torch.nn.Flatten()的用法下面举例说明总结torch
阅读更多...
Python Faker库基本用法详解

Python Faker库基本用法详解

《PythonFaker库基本用法详解》Faker是一个非常强大的库,适用于生成各种类型的伪随机数据,可以帮助开发者在测试、数据生成、或其他需要随机数据的场景中提高效率,本文给大家介绍PythonF... 目录安装基本用法主要功能示例代码语言和地区生成多条假数据自定义字段小结Faker 是一个 python
阅读更多...
C/C++错误信息处理的常见方法及函数

C/C++错误信息处理的常见方法及函数

《C/C++错误信息处理的常见方法及函数》C/C++是两种广泛使用的编程语言,特别是在系统编程、嵌入式开发以及高性能计算领域,：本文主要介绍C/C++错误信息处理的常见方法及函数,文中通过代码介绍... 目录前言1. errno 和 perror()示例：2. strerror()示例：3. perror(
阅读更多...
前端高级CSS用法示例详解

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交
阅读更多...
Go标准库常见错误分析和解决办法

Go标准库常见错误分析和解决办法

《Go标准库常见错误分析和解决办法》Go语言的标准库为开发者提供了丰富且高效的工具,涵盖了从网络编程到文件操作等各个方面,然而,标准库虽好,使用不当却可能适得其反,正所谓工欲善其事,必先利其器,本文将... 目录1. 使用了错误的time.Duration2. time.After导致的内存泄漏3. jsO
阅读更多...
揭秘Python Socket网络编程的7种硬核用法

揭秘Python Socket网络编程的7种硬核用法

《揭秘PythonSocket网络编程的7种硬核用法》Socket不仅能做聊天室,还能干一大堆硬核操作,这篇文章就带大家看看Python网络编程的7种超实用玩法,感兴趣的小伙伴可以跟随小编一起... 目录1.端口扫描器：探测开放端口2.简易 HTTP 服务器：10 秒搭个网页3.局域网游戏：多人联机对战4.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2