当前位置: 首页 > news >正文

el-select实现可复制一段“关键词“(多个)实现搜索 以及 回车选中搜索项

el-select实现可复制一段"关键词"(多个)实现搜索 以及 回车选中搜索项

<el-selectref="productRef"filterableclearablev-model="fItem.productName"multiple:reserve-keyword="true"remote:filter-method="remoteMethod"@visible-change="visibleChange"@keyup.enter="handleEnterKey(fIndex)"
><el-optionv-for="(item3, index3) in portFullNameOpt":key="index3":label="(item3.productCode ? '(' + item3.productCode + ')' : '') + item3.productName":value="item3.productId"></el-option>
</el-select>

添加remote属性,用filter-method实现自定义搜索方法

// 多搜索
function remoteMethod(query: any) {if (query !== '') {// 当前场景query是以空格分开的关键词,比如"001  002",所以处理成数组形式state.keyUpData = query.split(' ');// 接口过滤selectAllProductInfo({ productName: query }).then((res: any) => {state.portFullNameOpt = res.data;});} else {state.portFullNameOpt = state.pordOriginalOpt;}
}
// 下拉框消失时,恢复默认选项
function visibleChange(data: any) {if (!data) {state.portFullNameOpt = state.pordOriginalOpt;}
}
// 回车自动选中搜索过滤出来的选项
function handleEnterKey(fIndex: number) {if (state.keyUpData.length) {// 场景:复制搜索的是关键词,但是绑定的是productId,所以处理一下const queryProductId = state.portFullNameOpt.filter((item1: { productCode: any }) => state.keyUpData.includes(item1.productCode)).map((item2: { productId: any }) => item2.productId);// console.log(queryProductId, 'att');state.newAgencySalesList.forEach((item: any, index: number) => {if (fIndex == index) {item.productName = queryProductId;}});}
}

相关文章:

el-select实现可复制一段“关键词“(多个)实现搜索 以及 回车选中搜索项

el-select实现可复制一段"关键词"&#xff08;多个&#xff09;实现搜索 以及 回车选中搜索项 <el-selectref"productRef"filterableclearablev-model"fItem.productName"multiple:reserve-keyword"true"remote:filter-method&quo…...

C++解析xml示例

C解析xml示例 1. Xml文档介绍1.1 特点及作用1.2 Xml优点1.2.1 良好的可拓展性1.2.2 内容与形式分离 1.3 Xml组成1.3.1 Xml声明1.3.2 根元素1.3.3 元素1.3.4 属性1.3.5 实体1.3.6 注释 2 C解析Xml2.1 tinyXml2类库2.2 关键接口2.2.1 LoadFile2.2.2 RootElement2.2.3 FirstChildE…...

记录 | linux find+rm查找并直接删除

findrm查找并直接删除&#xff1a; find ./ -name "xx_name" |xargs rm -rf...

24.有哪些生命周期回调方法?有哪几种实现方式?

有哪些生命周期回调方法?有哪几种实现方式? 有两个重要的bean 生命周期方法, 第一个是init , 它是在容器加载bean的时候被调用。第二个方法是 destroy 它是在容器卸载类的时候被调用。bean 标签有两个重要的属性(init-method和destroy-method)。用它们你可以自己定制初始…...

C++详解

//7&#xff0e;用new建立一个动态一维数组&#xff0c;并初始化int[10]{1,2,3,4,5,6,7,8,9,10},用指针输出&#xff0c;最后销毁数组所占空间。 #include<iostream> #include<string> using namespace std; int main() { int *p; pnew int[10]; for(i…...

mybatis数据输入-实体类型的参数

1、建库建表 CREATE DATABASE mybatis-example;USE mybatis-example;CREATE TABLE t_emp(emp_id INT AUTO_INCREMENT,emp_name CHAR(100),emp_salary DOUBLE(10,5),PRIMARY KEY(emp_id) );INSERT INTO t_emp(emp_name,emp_salary) VALUES("tom",200.33); INSERT INTO…...

Java-接口

目录 定义 格式 使用 接口中成员的特点 成员变量 构造方法 成员方法 JDK8新特性&#xff1a;可以定义有方法体的方法 默认方法 作用 定义格式 注意事项 静态方法 定义格式 注意事项 JDK9新特性&#xff1a;可以定义私有方法 私有方法的定义格式 接口和接口之…...

mysql常用命令行代码

连接到 MySQL 服务器&#xff1a; mysql -u your_username -p替换 your_username 为你的 MySQL 用户名。系统会提示你输入密码。 退出 MySQL 命令行&#xff1a; EXIT;或者按 Ctrl D。 显示所有数据库&#xff1a; SHOW DATABASES;选择数据库&#xff1a; USE your_database…...

Python压缩、解压文件

#!/usr/bin/python3 # -*- coding:utf-8 -*- """ author: JHC file: util_compress.py time: 2023/5/28 14:58 desc: rarfile 使用需要安装 rarfile 和 unrar 并且将 unrar.exe 复制到venv/Scrpits目录下 &#xff08;从WinRar安装目录下白嫖的&#xff09; 下载…...

面试就是这么简单,offer拿到手软(一)—— 常见非技术问题回答思路

面试系列&#xff1a; 面试就是这么简单&#xff0c;offer拿到手软&#xff08;一&#xff09;—— 常见非技术问题回答思路 面试就是这么简单&#xff0c;offer拿到手软&#xff08;二&#xff09;—— 常见65道非技术面试问题 文章目录 一、前言二、常见面试问题回答思路问…...

134. 加油站(贪心算法)

根据题解 这道题使用贪心算法&#xff0c;找到当前可解决问题的状态即可 「贪心算法」的问题需要满足的条件&#xff1a; 最优子结构&#xff1a;规模较大的问题的解由规模较小的子问题的解组成&#xff0c;规模较大的问题的解只由其中一个规模较小的子问题的解决定&#xff…...

Springboot3+vue3从0到1开发实战项目(二)

前面完成了注册功能这次就来写登录功能&#xff0c; 还是按照这个方式来 明确需求&#xff1a; 登录接口 前置工作 &#xff1a; 想象一下登录界面&#xff08;随便在百度上找一张&#xff09; 看前端的能力咋样了&#xff0c; 现在我们不管后端看要什么参数就好 阅读接口文档…...

Spring中Bean的生命周期

1.生命周期 Spring应用中容器管理了我们每一个bean的生命周期&#xff0c;为了保证系统的可扩展性&#xff0c;同时为用户提供自定义的能力&#xff0c;Spring提供了大量的扩展点。完整的Spring生命周期如下图所示&#xff0c;绿色背景的节点是ApplictionContext生命周期特有的…...

IndexOutOfBoundsException: Index: 2048, Size: 2048] Controller接收对象集合长度超过2048错误

完整异常信息&#xff1a; org.apache.catalina.core.StandardWrapperValve.invoke Servlet.service() for servlet [spring] in context with path [/jsgc] threw exception [Request processing failed; nested exception is org.springframework.beans.InvalidPropertyExce…...

2023年中国消费金融行业研究报告

第一章 行业概况 1.1 定义 中国消费金融行业&#xff0c;作为国家金融体系的重要组成部分&#xff0c;旨在为消费者提供多样化的金融产品和服务&#xff0c;以满足其消费需求。这一行业包括银行、消费金融公司、小额贷款公司等多种金融机构&#xff0c;涵盖了包括消费贷款在内…...

深度学习:什么是知识蒸馏(Knowledge Distillation)

1 概况 1.1 定义 知识蒸馏&#xff08;Knowledge Distillation&#xff09;是一种深度学习技术&#xff0c;旨在将一个复杂模型&#xff08;通常称为“教师模型”&#xff09;的知识转移到一个更简单、更小的模型&#xff08;称为“学生模型”&#xff09;中。这一技术由Hint…...

【Go】protobuf介绍及安装

目录 一、Protobuf介绍 1.Protobuf用来做什么 2. Protobuf的序列化与反序列化 3. Protobuf的优点和缺点 4. RPC介绍 <1>文档规范 <2>消息编码 <3>传输协议 <4>传输性能 <5>传输形式 <6>浏览器的支持度 <7>消息的可读性和…...

c语言编程题经典100例——(41~45例)

1,实现动态内存分配。 在C语言中&#xff0c;动态内存分配使用malloc、calloc、realloc和free函数。以下是一个示例&#xff1a; #include <stdio.h> #include <stdlib.h> int main() { int *ptr NULL; // 初始化为空 int n 5; // 假设我们想要分配5个整数…...

计算机毕业设计|基于SpringBoot+MyBatis框架健身房管理系统的设计与实现

计算机毕业设计|基于SpringBootMyBatis框架的健身房管理系统的设计与实现 摘 要:本文基于Spring Boot和MyBatis框架&#xff0c;设计并实现了一款综合功能强大的健身房管理系统。该系统涵盖了会员卡查询、会员管理、员工管理、器材管理以及课程管理等核心功能&#xff0c;并且…...

java学习part27线程死锁

基本就是操作系统的内容 138-多线程-线程安全的懒汉式_死锁_ReentrantLock的使用_哔哩哔哩_bilibili...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...