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输入框需要支持多输入,最后传输给后台的字段值以逗号分割
需求:一个输入框字段需要支持多次输入,最后传输给后台的字段值以逗号分割 解决方案:结合了el-tag组件的动态编辑标签 那块的代码 //子组件 <template><div class"input-multiple-box" idinputMultipleBox><div>…...
C# 枚举格式字符串
总目录 前言 当前文章为 C# 中的格式设置(格式化字符串) 大全 中的一个小章节。 一、概述 1. 基本信息 可以使用 Enum.ToString 方法,新建表示枚举成员的数字值、十六进制值或字符串值的字符串对象。枚举格式说明符不区分大小写。 二、自定义数字格式说明符详解…...
【51单片机-零基础chapter1】
安装软件(配套的有,不多赘述) 1.管理员身份运行keil和破解软件kegen 将CID代码复制粘贴到 一定要管理员方式,不然会error 插入板子 我的电脑,管理 1.如果是拯救者,查看端口,如果没有则显示隐藏 2.苹果不知道,好像不可以 3.其他电脑在"其他设备找" (注:本人在校已…...
记录:导出功能:接收文件流数据进行导出(vue3)
请求接口:一定要加responseType: blob 后端返回数据: api.js export function export() {return request({url: dev/api/export,method: get,responseType: blob,//一定要加}) } vue: import {export} from /api// 导出 const exportTab…...
基于Spring Boot + Vue3实现的在线汽车保养维修预约管理系统源码+文档
前言 基于Spring Boot Vue3实现的在线汽车保养维修预约管理系统是一种前后端分离架构的应用,它结合了Java后端开发框架Spring Boot和现代JavaScript前端框架Vue.js 3.0的优势。这样的系统可以为汽车服务站提供一个高效的平台来管理客户的预约请求 技术选型 系统…...
PHP框架+gatewayworker实现在线1对1聊天--接收消息(7)
文章目录 接收消息的原理接收消息JavaScript代码 接收消息的原理 接收消息,就是接受服务器转发的客户端消息。并不需要单独创建函数,因为 ws.onmessage会自动接收消息。我们需要在这个函数里进行处理。因为初始化的时候,已经处理的init类型的…...
18.1、网络安全策略分类 流程 内容
目录 网络安全测评概况网络安全测评类型—基于测评目标分类网络安全测评类型—基于实施方式分类网络安全测评类型—基于测评对象保密性分类网络安全等级保护测评内容网络安全测评流程与内容 网络安全测评概况 网络安全测评,它是指参照一定的标准规范要求࿰…...
深入理解连接池:从数据库到HTTP的优化之道
在现代应用开发中,高效的资源管理是关键,其中连接池(Connection Pool)技术起到了至关重要的作用。本文将带你深入了解连接池的概念及其在数据库和HTTP通信中的应用,结合 JDBC 与 Druid 的关系,以及 HttpURL…...
【2025最新计算机毕业设计】基于SpringBoot+Vue智慧养老医护系统(高质量源码,提供文档,免费部署到本地)【提供源码+答辩PPT+文档+项目部署】
作者简介:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容:🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...
关于使用vue-cropperjs上传一张图后,再次上传时,裁剪的图片不更新的问题
不更新的原因 它与cropperjs不太一样,vue-cropperjs不是一个实例,当页面首次刷新时它就已经创建,即使后面更改了它的某些数据也不会改变,因为浏览器会对dom组件进行缓存。 解决办法 可以使用v-if来控制它的显示和隐藏ÿ…...
学习threejs,导入VTK格式的模型
👨⚕️ 主页: gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.VTKLoader VTK模型加…...
大麦抢票科技狠活
仅供学习参考,切勿再令您所爱的人耗费高昂的价格去购置黄牛票 ⚠️核心内容参考: 据悉,于购票环节,大麦凭借恶意流量清洗技术,于网络层实时甄别并阻拦凭借自动化手段发起下单请求的流量,强化对刷票脚本、刷票软件以及…...
PostgreSQL 表达式
PostgreSQL中的表达式是一种强大的工具,用于在数据库查询中处理和计算数据。它们由一个或多个值、运算符和PostgreSQL函数组合而成,类似于公式,并用于求值【1†source】。 在PostgreSQL中,表达式可以分为不同类型,如布…...
WPF区域导航+导航参数使用+路由守卫+导航日志
背景:使用ContentControl控件实现区域导航是有Mvvm框架的WPF都能使用的,不限于Prism 主要是将ContenControl控件的Content内容在ViewModel中切换成不同的用户控件 下面是MainViewModel: private object body;public object Body {get { retu…...
Springboot启动报错:Failed to start bean ‘documentationPluginsBootstrapper‘
在使用SpringBoot2.7时,由于与Swagger2的版本不兼容引发的ApplicationContextException,解决方法是在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 平台上,使用 C 和 Qt 框架实现动画是一个非常好的选择。Qt 提供了强大的动画框架(Qt Animation Framework),使得动画的实现变得简单高效。下面将介绍 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数据库,CDC同步到doris 数仓。对于SQLServer xml类型,doris没有相应的字段对应, 可以使用json来存储xml数据。需要进行一步转换。从 flink 自定义函数入手…...
F.interpolate函数
F.interpolate 是 PyTorch 中用于对张量(通常是图像数据)进行插值操作的函数,常用于调整张量的大小,例如改变图像的分辨率。它支持多种插值方法,包括最近邻插值、双线性插值和三次插值等。 语法 torch.nn.functional…...
华为交换机---自动备份配置到指定ftp/sftp服务器
华为交换机—自动备份配置到指定ftp服务器 需求 交换机配置修改后及时备份相关配置,每次配置变化后需要在1分钟后自动进行保存,并且将配置上传至FTP服务器;每隔30分钟,交换机自动把配置上传到FTP服务器。 1、定时保存新配置的时间间隔为*分钟(1天=1440),默认为30分钟(…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
