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

el-input输入框需要支持多输入,最后传输给后台的字段值以逗号分割

需求:一个输入框字段需要支持多次输入,最后传输给后台的字段值以逗号分割
解决方案:结合了el-tag组件的动态编辑标签 那块的代码

//子组件
<template><div class="input-multiple-box" id='inputMultipleBox'><div><el-tag v-for="(tag, index) in inputTagList" :key="index" type="info" closable @close="handleClose(index)">{{ tag }}</el-tag></div><el-inputv-model="inputValue"@keyup.enter="handleInputConfim"@blur="handleInputConfim"style="flex: 1; min-width: 100px"placeholder="按下enter键或者失去焦点进行添加"></el-input></div>
</template><script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'const props = defineProps(["inputTags", "separator"]);
const emit = defineEmits(['update:inputTags'])const inputTagList = ref([])
const inputValue = ref('')
const handleClose = (index: number) => {inputTagList.value.splice(index, 1)emit('update:inputTags', inputTagList.value.join(props.separator || ','))
}
const handleInputConfim = () => {if (inputValue.value) {inputTagList.value.push(inputValue.value)inputValue.value = ''emit('update:inputTags', inputTagList.value.join(props.separator || ','))}
}watch(()=>props.inputTags, (val, pre) => {inputTagList.value = props.inputTags.split(props.separator || ',')
});onMounted(() => {if (props.inputTags) {inputTagList.value = props.inputTags.split(props.separator || ',')}
})
</script><style lang="scss" scoped>
.input-multiple-box {width: 100%;border-radius: 4px;border: 1px solid #dcdfe6;// padding: 0 5px;display: flex;flex-wrap: wrap;
}
</style>
<style lang="scss">
#inputMultipleBox {.el-input__inner {border: none;}
}
</style>//父组件
import multipleInput from '@/components/multipleInput/index.vue'
<multipleInputv-model:inputTags="form.modbus"placeholder="请输入"clearable></multipleInput>

实现效果图
在这里插入图片描述

相关文章:

el-input输入框需要支持多输入,最后传输给后台的字段值以逗号分割

需求&#xff1a;一个输入框字段需要支持多次输入&#xff0c;最后传输给后台的字段值以逗号分割 解决方案&#xff1a;结合了el-tag组件的动态编辑标签 那块的代码 //子组件 <template><div class"input-multiple-box" idinputMultipleBox><div>…...

C# 枚举格式字符串

总目录 前言 当前文章为 C# 中的格式设置(格式化字符串) 大全 中的一个小章节。 一、概述 1. 基本信息 可以使用 Enum.ToString 方法&#xff0c;新建表示枚举成员的数字值、十六进制值或字符串值的字符串对象。枚举格式说明符不区分大小写。 二、自定义数字格式说明符详解…...

【51单片机-零基础chapter1】

安装软件(配套的有,不多赘述) 1.管理员身份运行keil和破解软件kegen 将CID代码复制粘贴到 一定要管理员方式,不然会error 插入板子 我的电脑,管理 1.如果是拯救者,查看端口,如果没有则显示隐藏 2.苹果不知道,好像不可以 3.其他电脑在"其他设备找" (注:本人在校已…...

记录:导出功能:接收文件流数据进行导出(vue3)

请求接口&#xff1a;一定要加responseType: blob 后端返回数据&#xff1a; api.js export function export() {return request({url: dev/api/export,method: get,responseType: blob,//一定要加}) } vue&#xff1a; import {export} from /api// 导出 const exportTab…...

基于Spring Boot + Vue3实现的在线汽车保养维修预约管理系统源码+文档

前言 基于Spring Boot Vue3实现的在线汽车保养维修预约管理系统是一种前后端分离架构的应用&#xff0c;它结合了Java后端开发框架Spring Boot和现代JavaScript前端框架Vue.js 3.0的优势。这样的系统可以为汽车服务站提供一个高效的平台来管理客户的预约请求 技术选型 系统…...

PHP框架+gatewayworker实现在线1对1聊天--接收消息(7)

文章目录 接收消息的原理接收消息JavaScript代码 接收消息的原理 接收消息&#xff0c;就是接受服务器转发的客户端消息。并不需要单独创建函数&#xff0c;因为 ws.onmessage会自动接收消息。我们需要在这个函数里进行处理。因为初始化的时候&#xff0c;已经处理的init类型的…...

18.1、网络安全策略分类 流程 内容

目录 网络安全测评概况网络安全测评类型—基于测评目标分类网络安全测评类型—基于实施方式分类网络安全测评类型—基于测评对象保密性分类网络安全等级保护测评内容网络安全测评流程与内容 网络安全测评概况 网络安全测评&#xff0c;它是指参照一定的标准规范要求&#xff0…...

深入理解连接池:从数据库到HTTP的优化之道

在现代应用开发中&#xff0c;高效的资源管理是关键&#xff0c;其中连接池&#xff08;Connection Pool&#xff09;技术起到了至关重要的作用。本文将带你深入了解连接池的概念及其在数据库和HTTP通信中的应用&#xff0c;结合 JDBC 与 Druid 的关系&#xff0c;以及 HttpURL…...

【2025最新计算机毕业设计】基于SpringBoot+Vue智慧养老医护系统(高质量源码,提供文档,免费部署到本地)【提供源码+答辩PPT+文档+项目部署】

作者简介&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容&#xff1a;&#x1f31f;Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...

关于使用vue-cropperjs上传一张图后,再次上传时,裁剪的图片不更新的问题

不更新的原因 它与cropperjs不太一样&#xff0c;vue-cropperjs不是一个实例&#xff0c;当页面首次刷新时它就已经创建&#xff0c;即使后面更改了它的某些数据也不会改变&#xff0c;因为浏览器会对dom组件进行缓存。 解决办法 可以使用v-if来控制它的显示和隐藏&#xff…...

学习threejs,导入VTK格式的模型

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.VTKLoader VTK模型加…...

大麦抢票科技狠活

仅供学习参考&#xff0c;切勿再令您所爱的人耗费高昂的价格去购置黄牛票 ⚠️核心内容参考: 据悉&#xff0c;于购票环节&#xff0c;大麦凭借恶意流量清洗技术&#xff0c;于网络层实时甄别并阻拦凭借自动化手段发起下单请求的流量&#xff0c;强化对刷票脚本、刷票软件以及…...

PostgreSQL 表达式

PostgreSQL中的表达式是一种强大的工具&#xff0c;用于在数据库查询中处理和计算数据。它们由一个或多个值、运算符和PostgreSQL函数组合而成&#xff0c;类似于公式&#xff0c;并用于求值【1†source】。 在PostgreSQL中&#xff0c;表达式可以分为不同类型&#xff0c;如布…...

WPF区域导航+导航参数使用+路由守卫+导航日志

背景&#xff1a;使用ContentControl控件实现区域导航是有Mvvm框架的WPF都能使用的&#xff0c;不限于Prism 主要是将ContenControl控件的Content内容在ViewModel中切换成不同的用户控件 下面是MainViewModel&#xff1a; private object body;public object Body {get { retu…...

Springboot启动报错:Failed to start bean ‘documentationPluginsBootstrapper‘

在使用SpringBoot2.7时&#xff0c;由于与Swagger2的版本不兼容引发的ApplicationContextException&#xff0c;解决方法是在application.yml中配置spring.mvc.pathmatch.matching-strategy:ant_path_matcher。 org.springframework.context.ApplicationContextException: Fai…...

qt-C++笔记之动画框架(Qt Animation Framework)入门

qt-C笔记之动画框架(Qt Animation Framework)入门 code review! 在 Linux 平台上&#xff0c;使用 C 和 Qt 框架实现动画是一个非常好的选择。Qt 提供了强大的动画框架&#xff08;Qt Animation Framework&#xff09;&#xff0c;使得动画的实现变得简单高效。下面将介绍 Qt …...

C++26 函数契约(Contract)概览

文章目录 1. 什么是契约编程?契约编程的三大核心: 2. C26 契约编程的语法语法示例 3. 契约检查模式3.1. default 模式3.2. audit 模式3.3. axiom 模式检查模式的设置 4. 契约编程与传统 assert 的区别示例对比 5. 契约编程的应用场景6. 注意事项7. 示例: 带契约的矩形面积计算…...

Flink CDC 自定义函数处理 SQLServer XML类型数据 映射 doris json字段方案

Flink CDC 自定义函数处理 SQLServer XML类型数据方案 1. 背景 因业务使用SQLServer数据库&#xff0c;CDC同步到doris 数仓。对于SQLServer xml类型&#xff0c;doris没有相应的字段对应&#xff0c; 可以使用json来存储xml数据。需要进行一步转换。从 flink 自定义函数入手…...

F.interpolate函数

F.interpolate 是 PyTorch 中用于对张量&#xff08;通常是图像数据&#xff09;进行插值操作的函数&#xff0c;常用于调整张量的大小&#xff0c;例如改变图像的分辨率。它支持多种插值方法&#xff0c;包括最近邻插值、双线性插值和三次插值等。 语法 torch.nn.functional…...

华为交换机---自动备份配置到指定ftp/sftp服务器

华为交换机—自动备份配置到指定ftp服务器 需求 交换机配置修改后及时备份相关配置,每次配置变化后需要在1分钟后自动进行保存,并且将配置上传至FTP服务器;每隔30分钟,交换机自动把配置上传到FTP服务器。 1、定时保存新配置的时间间隔为*分钟(1天=1440),默认为30分钟(…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...