vue3 antdv Select 实现输入关键词,通过服务器去查询数据,并显示到表格中的实现思路。

实现思路:

1)输入关键词,通过Select的查询事件(onSearch)来到服务器查询数据。

2)根据查询到的数据显示到表格中,然后通过表格的(cellClickEvent)事件来选择相关的用户。

3)如果没有查询到,那么点击底部的增加(onAddInfo),弹出框来增加。

4)弹框中增加到服务器后,通过服务器返回的id,及输入的用户名,电话,直接赋值到界面。

1、先上一个效果图:

2、实现

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

根据官方文档,我们要实现这个slot,上代码:

<Selectplaceholder="请输入姓名"v-model:value="formStateUser.realname"style="width: 100%"show-search:open="mnuOpen":options="items.map((item) => ({ value: item }))"@search="onSearch"allow-clearref="mnuSelect":dropdownMatchSelectWidth="false"><template #dropdownRender="{ menuNode: menu }"><vxe-gridref="tableRef"v-bind="gridOptions"style="width: 100%; margin-top: -3px"@cell-click="cellClickEvent":row-config="{ isHover: true }"/><Divider style="margin: 4px 0" /><divstyle="padding: 4px 8px; cursor: pointer"@mousedown="(e) => e.preventDefault()"@click="onAddInfo"><plus-outlined /><span class="modal-btn">增加</span></div></template><template #notFoundContent><span>暂无任用户信息。</span></template></Select>

这里就是表格显示的位置 ,用的是vxe-grid来实现的:

上面就是Select数据选择的实现,提供一个简单思路,可以根据具体的环境来实现。

下面帖几个代码,来检测是否是点了表格+分页+增加按钮的,点击外边的部分,自动关闭对话框:

onMounted(() => {// 监听 document 上的点击事件document.addEventListener('click', (event) => {if (!isVxeTableClick(event)) {mnuOpen.value = false;//close}});});
const isVxeTableClick = (event) => {let target = event.target;while (target && target !== document) {if (target.className &&typeof target.className === 'string' &&(target.className.includes('vxe-table') ||target.className.includes('vxe-pager') ||target.className.includes('modal-btn'))) {// 点击事件来自 vxe-tablereturn true;}target = target.parentNode;}return false;};

主要是上面的代码,来检测是否要关闭dropdownRender。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/858181.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python武器库开发-武器库篇之ThinkPHP 5.0.23-RCE 漏洞复现(六十四)

Python武器库开发-武器库篇之ThinkPHP 5.0.23-RCE 漏洞复现&#xff08;六十四&#xff09; 漏洞环境搭建 这里我们使用Kali虚拟机安装docker并搭建vulhub靶场来进行ThinkPHP漏洞环境的安装&#xff0c;我们进入 ThinkPHP漏洞环境&#xff0c;可以 cd ThinkPHP&#xff0c;然…

嵌入式学习——数据结构(队列)——day50

1. 查找二叉树、搜索二叉树、平衡二叉树 2. 哈希表——人的身份证——哈希函数 3. 哈希冲突、哈希矛盾 4. 哈希代码 4.1 创建哈希表 4.2 5. 算法设计 5.1 正确性 5.2 可读性&#xff08;高内聚、低耦合&#xff09; 5.3 健壮性 5.4 高效率&#xff08;时间复杂度&am…

【Java】pcm 与 wav 格式互转工具类 (附测试用例)

文章目录 1. 前言1.1 背景1.2 目标1.3 亮点 2. 用例说明3. 补充验证4. 相关链接 1. 前言 git 仓库 https://github.com/ChenghanY/pcm-wav-converter 1.1 背景 系统新接入语音引擎。 语音引擎只认 pcm 格式数据。前端只认 wav 格式 。 需要后端对 pcm 和 wav 格式实现互转&a…

2.超声波测距模块

1.简介 2.超声波的时序图 3.基于51单片机实现的代码 #include "reg52.h" #include "intrins.h" sbit led1P3^7;//小于10&#xff0c;led1亮&#xff0c;led2灭 sbit led2P3^6;//否则&#xff0c;led1灭&#xff0c;led2亮 sbit trigP1^5; sbit echo…

Adobe XD最新2023资源百度云盘下载(附教程)

如大家所了解的&#xff0c;Adobe XD是一种基于矢量的UI和UX设计工具&#xff0c;可用于设计从智能手表应用程序到成熟网站的任何内容&#xff0c;功能非常强大且操作便捷。目前最新已推出2023版本。 Adobe XD解决了Photoshop和其他图形应用程序无法解决的两个主要问题&#xf…

vue 中实现用户上传文件夹的功能

vue 中实现上传文件夹的功能 使用 input 元素的 webkitdirectory 属性使用 vue-simple-uploader 组件 vue 中文件上传一般都是用 element 中的 upload 组件&#xff0c;upload 组件可以实现单个文件或者多个文件的上传&#xff0c;但是无法通过选择文件夹上传其中文件。 要实现…

八爪鱼现金流-030,升级日志

八爪鱼现金流 八爪鱼 2024年4月4日09:27:02 v-0.0.1 资产包、负债包&#xff0c;功能优化 2024年4月15日09:27:26 v-0.0.2 增加公告模块 2024年4月18日12:14:32 v-0.0.3 市场查询优化。创建人脱敏处理。增加市场风云菜单。 2024年4月18日15:57:10 v-0.0.4 对于无截止日…

如何自制一个Spring Boot Starter并推送到远端公服

在现代Java开发中&#xff0c;Spring Boot无疑是一个强大且便捷的框架&#xff0c;它通过提供大量的Starter来简化依赖管理和项目配置。有时&#xff0c;我们可能需要为特定功能或团队定制Starter。本文将指导你如何创建自己的Spring Boot Starter并将其推送到远程公共服务器上…

Pwn刷题记录(不停更新)

1、CTFshow-pwn04&#xff08;基础canary&#xff09; ​ 好久没碰过pwn了&#xff0c;今天临时做一道吧&#xff0c;毕竟刚联合了WSL和VSCode&#xff0c;想着试着做一道题看看&#xff0c;结果随手一点&#xff0c;就是一个很少接触的&#xff0c;拿来刷刷&#xff1a; ​ …

ClosedXML

一、类库介绍 ClosedXML是一个用于读取、操作和写入Excel 2007 (.xlsx, .xlsm)文件的.NET第三方库。它基于OpenXML&#xff0c;但与OpenXML相比&#xff0c;ClosedXML具有更高的性能和更易于使用的API接口。 ClosedXML支持XML文档的解析和生成&#xff0c;可以处理复杂的XML结…

STL迭代器的应用

STL迭代器的应用 迭代器的定义方法&#xff1a; 类型作用定义方式正向迭代器正序遍历STL容器容器类名::iterator 迭代器名常量正向迭代器以只读方式正序遍历STL容器容器类名::const_iterator 迭代器名反向迭代器逆序遍历STL容器容器类名::reverse_iterator 迭代器名常量反向迭…

使用Spring Boot构建全栈应用程序:从理论到实践

文章目录 引言第一章 项目初始化1.1 使用Spring Initializr生成项目1.2 创建基本项目结构 第二章 后端服务开发2.1 定义实体类2.2 创建Repository接口2.3 实现Service类2.4 创建Controller类 第三章 前端集成3.1 使用Thymeleaf模板引擎3.2 创建前端控制器 第四章 安全配置4.1 S…

如何解决vue中的路由守卫失效问题

引言 1. 路由守卫简介 路由守卫是前端开发中一个至关重要的概念&#xff0c;特别是在使用单页应用&#xff08;SPA&#xff09;框架如React、Vue或Angular时。它们充当了SPA中的“门卫”&#xff0c;控制着用户对不同页面的访问权限。路由守卫的核心功能是确保用户在访问特定…

迅狐多商户直播商城系统源码:电商领域的创新融合

随着直播技术的兴起和电子商务的蓬勃发展&#xff0c;迅狐多商户直播商城系统源码应运而生&#xff0c;为商家和消费者提供了一个全新的互动购物平台。 多商户直播商城系统源码概述 迅狐多商户直播商城系统源码是一个高度集成的解决方案&#xff0c;它结合了直播的即时性和电…

C语言的数据结构:树与二叉树(树篇)

前言 之前所学到的数据结构都是线性结构特征&#xff0c;所谓线性就是在结构上&#xff0c;将节点连接起来时&#xff0c;像一条线一样。如链表则是上一个节点包含下一个节点地址的指针&#xff0c;这样依次下去。而串、队列、栈则实现方式都依赖于链表或顺序表而实现&#xf…

报错:mAP数据为0%+无法读取output里的图片红色警告

debug检查&#xff1a;发现创建的output和input的路径不在同一级 操作1&#xff1a;修改output创建路径为绝对路径后&#xff0c;output和input文件成功在同一级&#xff0c;但问题仍存在 debug检测&#xff1a;识别的类别和保存的类别不同&#xff0c;没有保存数据 操作2&…

文件夹或文件已在另一程序中打开,找句柄发现是explorer.exe如何解决

1.找到句柄&#xff1a;ctrl alt del打开任务资源管理器 2.注意是选择CPU -> 关联的句柄&#xff0c;而不是概述 如果发现只有explorer.exe&#xff0c;那肯定是不对的&#xff0c;我们先shfit一个一个删除&#xff0c;发现哪个删不掉&#xff0c;再在这里找句柄&#xff0c…

用AI打败AI,利用ai指令对头条文章进行查重测试,结果出乎意料

前言&#xff1a;现在的ai真的太火爆了&#xff0c;让人不得不感叹ai的神奇之处&#xff0c;让我们一起来探讨下ai的强大之处吧&#xff01;本文仅限学习研究。 背景&#xff1a;最近看到很多人用ai写文章&#xff0c;然后被头条判定为疑似ai生成&#xff0c;所以想研究学习下…

NodeJs 使用中间件实现日志生成功能

写在前面 今天我们实现一个记录 nodejs 服务请求日志的功能&#xff0c;大概的功能包括请求拦截&#xff0c;将请求的信息作为日志文件的内容写入到 txt 文件中&#xff0c;然后输出到指定的日志到当天日期目录中&#xff0c;从而实现后续查找用户请求信息的功能&#xff0c;下…

【深度学习实战(40)】可变形卷积

一、可变形卷积&#xff08;DCN/DConv&#xff09; (a)是普通的卷积操作 (b)、©、(d)是可变形卷积&#xff08;deformable convolution&#xff0c;即DConv&#xff09; 可变形卷积实际是指标准卷积操作中采样位置增加了一个偏移量offset&#xff0c;这样卷积核就能在训…