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

誉天在线项目~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 基本构建块的事件 通用块&#xff08;Chunk&#xff09;功能 段落&#xff08;Paragraph&#xff09;事件 章节&#xff08;Chapter&#xff09;和 区域&#xff08;…...

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 集成安装环境&#xff0c;是一组常用来…...

Elasticsearch 入门 索引、分词器

term, match_phrase, match查询 参考 ElasticSearch match, match_phrase, term的区别 term是对输入不分词&#xff0c;进行全文索引查询。存储时是否启用分词器&#xff0c;会影响查询效果match_phase对输入分词&#xff0c;但要求查询时将每个term都搜到&#xff0c;且顺序…...

Android NDK 中有导出 sp智能指针吗?如果没有,可以用什么方法代替 android::sp 智能指针

Android NDK 中有导出 sp智能指针吗&#xff1f;如果没有&#xff0c;可以用什么方法代替 android::sp 智能指针 Author: Lycan Note: 以下问题解答通过大模型生成&#xff0c;主要用于个人学习和备忘&#xff0c;仅供参考&#xff0c;若有错误或者侵权&#xff0c;请联系我修…...

网络爬虫-----爬虫的分类及原理

目录 爬虫的分类 1.通用网络爬虫&#xff1a;搜索引擎的爬虫 2.聚焦网络爬虫&#xff1a;针对特定网页的爬虫 3.增量式网络爬虫 4.深层网络爬虫 通用爬虫与聚焦爬虫的原理 通用爬虫&#xff1a; 聚焦爬虫&#xff1a; 爬虫的分类 网络爬虫按照系统结构和实现技术&#…...

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题–回文子串 ​ 逻辑梳理清楚了&#xff0c;就还行。没有想象中那么难。注意遍历顺序&#xff0c;i从大到小。 class Solution { public:int countSubstrings(string …...

dll文件找不到,微软官方地址

dll文件找不到&#xff0c;微软官方地址 文件地址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文件体 重点&#xff1a;Tag包数据 Tag结构详细说明 注意&#xff1a; 每个Tag的头字段DataSize只是该Tag下data部分的大小&#xff0c;不包括Tag的header部分的大小 音频 AudioTag Data 所在…...

别再纠结线程池池大小、线程数量了,哪有什么固定公式 | 京东云技术团队

可能很多人都看到过一个线程数设置的理论&#xff1a; CPU 密集型的程序 - 核心数 1 I/O 密集型的程序 - 核心数 * 2 不会吧&#xff0c;不会吧&#xff0c;真的有人按照这个理论规划线程数&#xff1f; 线程数和CPU利用率的小测试 抛开一些操作系统&#xff0c;计算机原…...

Redis 数据一致性方案的分析与研究

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ 一般的业务场景都是读多写少的&#xff0c;当客户端的请求太多&#xff0c;对数据库的压力越来越大&#xff0c;引入缓存来降低数据库的压力是必然选择&#xff0c;目前业内…...

【网络安全】黑客自学笔记

1️⃣前言 &#x1f680;作为一个合格的网络安全工程师&#xff0c;应该做到攻守兼备&#xff0c;毕竟知己知彼&#xff0c;才能百战百胜。 计算机各领域的知识水平决定你渗透水平的上限&#x1f680; 【1】比如&#xff1a;你编程水平高&#xff0c;那你在代码审计的时候就会比…...

深入解析Perlin Simplex噪声函数:在C++中构建现代、高效、免费的3D图形背景

引言 在计算机图形中&#xff0c;噪声是一个经常被讨论的话题。无论是为了制造自然的纹理&#xff0c;还是为了模拟复杂的现实世界现象&#xff0c;噪声函数都在其中起着关键作用。而在众多噪声函数中&#xff0c;Perlin Simplex 噪声无疑是最受欢迎的一种。其原因不仅在于其干…...

【计算机辅助蛋白质结构分析、分子对接、片段药物设计技术与应用】

第一天 上午 生物分子互作基础 1.生物分子相互作用研究方法 1.1蛋白-小分子、蛋白-蛋白相互作用原理 1.2 分子对接研究生物分子相互作用 1.3 蛋白蛋白对接研究分子相互作用 蛋白数据库 1. PDB 数据库介绍 1.1 PDB蛋白数据库功能 1.2 PDB蛋白数据可获取资源 1.3 PDB蛋白数据库对…...

免费开箱即用微鳄售后工单管理系统

编者按&#xff1a;本文介绍基于天翎MyApps低代码平台开发的微鳄售后工单管理系统&#xff0c; 引入低代码平台可以帮助企业快速搭建和部署售后工单管理系统&#xff0c; 以工作流作为支撑&#xff0c;在线完成各环节数据审批&#xff0c;解决售后 工单 服务的全生命周期过程管…...

vant 组件库的基本使用

文章目录 vant组件库1、什么是组件库2、vant组件 全部导入 和 按需导入的区别3、全部导入的使用步骤&#xff1a;4、按需导入的使用步骤&#xff1a;5、封装vant文件包 vant组件库 该项目将使用到vant-ui组件库&#xff0c;这里的目标就是认识他&#xff0c;铺垫知识 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 的一个动态链接库文件&#xff0c;它包含了 C 运行时库的一些函数和类&#xff0c;对于许多应用程序和游戏来说都是必需的。如果您的系统中缺失了这个文件&#xff0c;可能会导致程序无法正常运行。下面我们将分享修复 msv…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...