誉天在线项目~ElementPlus Tag标签用法
效果图

页面展现
<el-form-item label="课程标签"><el-tagv-for="tag in dynamicTags":key="tag"class="mx-1"closable:disable-transitions="false"@close="handleClose(tag)"style="margin:5px;">{{ tag }}</el-tag><el-inputstyle="width:200px;"v-if="inputVisible"ref="InputRef"v-model="inputValue"class="ml-1 w-20"size="small"@keyup.enter="handleInputConfirm"@blur="handleInputConfirm"/><el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">+ 新标签</el-button></el-form-item>
初始化
//tag标签
const inputValue = ref('')
const dynamicTags = ref([])const inputVisible = ref(false)
const InputRef = ref()const handleClose = (tag) => {dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}const showInput = () => {inputVisible.value = truenextTick(() => {InputRef.value.input.focus()})
}const handleInputConfirm = () => {if (inputValue.value) {dynamicTags.value.push(inputValue.value)}inputVisible.value = falseinputValue.value = ''
}
保存时
//把数组转化成字符串,多个值以逗号隔开form.data.tags = dynamicTags.value.join(",")
回显时
//回显课程标签:数据库存储字符串,页面是数组。dynamicTags.value = form.data.tags.split(",") //将字符串拆成数组
相关文章:
誉天在线项目~ElementPlus Tag标签用法
效果图 页面展现 <el-form-item label"课程标签"><el-tagv-for"tag in dynamicTags":key"tag"class"mx-1"closable:disable-transitions"false"close"handleClose(tag)"style"margin:5px;">…...
iText实战--Table、cell 和 page event
5.1 使用表和单元格事件装饰表 实现PdfPTableEvent 接口 实现PdfPCellEvent 接口 合并表格和单元格事件 5.2 基本构建块的事件 通用块(Chunk)功能 段落(Paragraph)事件 章节(Chapter)和 区域(…...
WampServer下载安装+cpolar内网穿透实现公网访问本地服务【内网穿透】
文章目录 前言1.WampServer下载安装2.WampServer启动3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 前言 Wamp 是一个 Windows系统下的 Apache PHP Mysql 集成安装环境,是一组常用来…...
Elasticsearch 入门 索引、分词器
term, match_phrase, match查询 参考 ElasticSearch match, match_phrase, term的区别 term是对输入不分词,进行全文索引查询。存储时是否启用分词器,会影响查询效果match_phase对输入分词,但要求查询时将每个term都搜到,且顺序…...
Android NDK 中有导出 sp智能指针吗?如果没有,可以用什么方法代替 android::sp 智能指针
Android NDK 中有导出 sp智能指针吗?如果没有,可以用什么方法代替 android::sp 智能指针 Author: Lycan Note: 以下问题解答通过大模型生成,主要用于个人学习和备忘,仅供参考,若有错误或者侵权,请联系我修…...
网络爬虫-----爬虫的分类及原理
目录 爬虫的分类 1.通用网络爬虫:搜索引擎的爬虫 2.聚焦网络爬虫:针对特定网页的爬虫 3.增量式网络爬虫 4.深层网络爬虫 通用爬虫与聚焦爬虫的原理 通用爬虫: 聚焦爬虫: 爬虫的分类 网络爬虫按照系统结构和实现技术&#…...
uniapp级联菜单地点区域使用label值,web端el-cascader绑定的value
效果图 一、uniapp uniapp级联菜单地点区域使用label值 1.ui使用 <uni-forms-item label="地址" name="userArea" required><view class="" style="height: 100%;display: flex;align-items: center;">...
合肥先进光源国家重大科技基础设施项目及配套工程启动会纪念
合肥先进光源国家重大科技基础设施项目及配套工程启动会纪念 卡西莫多 合肥长丰岗集里 肥鸭从此别泥塘 先平场地设围栏 进而工地筑基忙 光阴似箭指日争 源流汇智山水长 国器西北扩新地 家校又添新区园 重器托举有群力 大步穿梭两地间 科教兴邦大国策 技术盈身坦荡行…...
力扣第47天--- 第647题、第516题
# 力扣第47天— 第647题、第516题 文章目录 一、第647题--回文子串二、第516题--最长回文子序列 一、第647题–回文子串 逻辑梳理清楚了,就还行。没有想象中那么难。注意遍历顺序,i从大到小。 class Solution { public:int countSubstrings(string …...
dll文件找不到,微软官方地址
dll文件找不到,微软官方地址 文件地址dllMicrosoft Visual C 2008 Redistributable Package ATL 安全更新https://www.microsoft.com/zh-cn/download/details.aspx?id10430Visual C Redistributable for Visual Studio 2012 Update 4https://www.microsoft.com/zh…...
【音视频】FLV封装格式
基本概念 文件头(Header)文件体(Body) flv文件头 主要是看signture和typeflags flv文件体 重点:Tag包数据 Tag结构详细说明 注意: 每个Tag的头字段DataSize只是该Tag下data部分的大小,不包括Tag的header部分的大小 音频 AudioTag Data 所在…...
别再纠结线程池池大小、线程数量了,哪有什么固定公式 | 京东云技术团队
可能很多人都看到过一个线程数设置的理论: CPU 密集型的程序 - 核心数 1 I/O 密集型的程序 - 核心数 * 2 不会吧,不会吧,真的有人按照这个理论规划线程数? 线程数和CPU利用率的小测试 抛开一些操作系统,计算机原…...
Redis 数据一致性方案的分析与研究
点击下方关注我,然后右上角点击...“设为星标”,就能第一时间收到更新推送啦~~~ 一般的业务场景都是读多写少的,当客户端的请求太多,对数据库的压力越来越大,引入缓存来降低数据库的压力是必然选择,目前业内…...
【网络安全】黑客自学笔记
1️⃣前言 🚀作为一个合格的网络安全工程师,应该做到攻守兼备,毕竟知己知彼,才能百战百胜。 计算机各领域的知识水平决定你渗透水平的上限🚀 【1】比如:你编程水平高,那你在代码审计的时候就会比…...
深入解析Perlin Simplex噪声函数:在C++中构建现代、高效、免费的3D图形背景
引言 在计算机图形中,噪声是一个经常被讨论的话题。无论是为了制造自然的纹理,还是为了模拟复杂的现实世界现象,噪声函数都在其中起着关键作用。而在众多噪声函数中,Perlin Simplex 噪声无疑是最受欢迎的一种。其原因不仅在于其干…...
【计算机辅助蛋白质结构分析、分子对接、片段药物设计技术与应用】
第一天 上午 生物分子互作基础 1.生物分子相互作用研究方法 1.1蛋白-小分子、蛋白-蛋白相互作用原理 1.2 分子对接研究生物分子相互作用 1.3 蛋白蛋白对接研究分子相互作用 蛋白数据库 1. PDB 数据库介绍 1.1 PDB蛋白数据库功能 1.2 PDB蛋白数据可获取资源 1.3 PDB蛋白数据库对…...
免费开箱即用微鳄售后工单管理系统
编者按:本文介绍基于天翎MyApps低代码平台开发的微鳄售后工单管理系统, 引入低代码平台可以帮助企业快速搭建和部署售后工单管理系统, 以工作流作为支撑,在线完成各环节数据审批,解决售后 工单 服务的全生命周期过程管…...
vant 组件库的基本使用
文章目录 vant组件库1、什么是组件库2、vant组件 全部导入 和 按需导入的区别3、全部导入的使用步骤:4、按需导入的使用步骤:5、封装vant文件包 vant组件库 该项目将使用到vant-ui组件库,这里的目标就是认识他,铺垫知识 1、什么…...
HTML常用基本元素总结
<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title> biao qian</title> </head> <body><h1>这是标题1</h1> <h2>这是标题2</h2> <h3>这是标题3</h3><p> 这…...
msvcp140.dll重新安装的解决方法是什么?(最新方法)
msvcp140.dll 是 Microsoft Visual C Redistributable 的一个动态链接库文件,它包含了 C 运行时库的一些函数和类,对于许多应用程序和游戏来说都是必需的。如果您的系统中缺失了这个文件,可能会导致程序无法正常运行。下面我们将分享修复 msv…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
【C++进阶篇】智能指针
C内存管理终极指南:智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
NPOI操作EXCEL文件 ——CAD C# 二次开发
缺点:dll.版本容易加载错误。CAD加载插件时,没有加载所有类库。插件运行过程中用到某个类库,会从CAD的安装目录找,找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库,就用插件程序加载进…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心,直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法,涵盖基础规则、优化算法和容错机制: 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则: 大尺寸/重量积木在下…...
