添加标签(vue3)

news2025/2/26 23:23:11

点击添加按钮: 最多添加5个 

注意:

不只可以el-form 进行校验,也可以对单个el-form-item 进行校验

vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法-CSDN博客

el-form 里边有el-form-item ,el-form-item里边有新的校验

可以对el-form-item 进行单个的校验

   <el-form-item label="展示标签:" :prop="EFormPropKeys.TAGS">
            <div class="display-label">
              <el-link
                v-if="!disabledForm" :icon="Plus" :underline="false" type="primary"
                v-throttle:click="{ time: 500, handler: handleAddTag }"
                >添加标签</el-link
              >
              <div v-if="createForm[EFormPropKeys.TAGS].length > 0" class="tag-list">
                <div
                  v-for="(item, index) in createForm[EFormPropKeys.TAGS]"
                  :key="index"
                  class="tag-item"
                >
                  <el-form-item
                    label="标签名称"
                    label-width="82px"
                    :prop="`${EFormPropKeys.TAGS}.${index}.labelName`"
                    :rules="tagRules.labelName"
                  >
                    <el-input v-model="item.labelName" maxlength="10" />
                  </el-form-item>
                  <el-form-item
                    label="颜色"
                    label-width="60px"
                    required
                    :prop="`${EFormPropKeys.TAGS}.${index}.colorCode`"
                    :rules="tagRules.colorCode"
                  >
                    <el-color-picker v-model="item.colorCode" show-alpha />
                    <el-icon class="delete-icon" v-if="!disabledForm" @click="removeTag(index)"
                      ><Delete
                    /></el-icon>
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-form-item>



 /**
   * 添加标签
   */
  const handleAddTag = () => {
    if (createForm[EFormPropKeys.TAGS].length >= 5) {
      ElMessage.warning("最多添加5个标签")
      return
    }
    createForm[EFormPropKeys.TAGS]?.push({
      labelName: "",
      colorCode: ""
    })
  }
const createForm = reactive({
     [EFormPropKeys.NAME]: "",
    [EFormPropKeys.TAGS]: [],
})  
 
 const tagRules = reactive({
    labelName: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
    colorCode: [{ required: true, message: "请选择颜色", trigger: "blur" }]
  })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2261424.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Dash for Mac 代码API文档管理软件安装

Mac分享吧 文章目录 Dash for Mac 代码API文档管理软件 效果图展示一、Dash 代码API文档管理软件 Mac电脑版——v7.3.31️⃣&#xff1a;下载软件2️⃣&#xff1a;安装软件2.1 左侧安装包拖入右侧文件夹中&#xff0c;等待安装完成&#xff0c;运行软件2.2 打开软件&#xff…

Unity添加newtonsoft-json

package name "com.unity.nuget.newtonsoft-json": "3.2.1",打开包管理器 输入包名称和版本 点击添加

分布式全文检索引擎ElasticSearch-数据的写入存储底层原理

一、数据写入的核心流程 当向 ES 索引写入数据时&#xff0c;整体流程如下&#xff1a; 1、客户端发送写入请求 客户端向 ES 集群的任意节点&#xff08;称为协调节点&#xff0c;Coordinating Node&#xff09;发送一个写入请求&#xff0c;比如 index&#xff08;插入或更…

TensorRT C++ API模型加速 —— TensorRT配置、模型转换、CUDA C++加速、TensorRT C++ 加速

文章目录 前言&#xff1a;TensorRT简介0.1、TensorRT算法流程0.2、TensorRT主要优化技术 一、TensorRT配置1.1、TensorRT环境配置1.1.1、CUDA安装1.1.2、TensorRT下载1.1.3、TensorRT CUDA配置1.1.4、TensorRT配置1.1.4.1、TensorRT python配置1.1.4.2、TensorRT C配置&#x…

RPC 服务与 gRPC 的入门案例

RPC 协议 RPC&#xff08;Remote Procedure Call Protocol&#xff09;即远程过程调用协议&#xff0c;它是一种通过网络从远程计算机程序上请求服务的协议&#xff0c;允许一个计算机程序可以像调用本地服务一样调用远程服务 。 RPC的主要作用是不同的服务间方法调用就像本地…

基于Spring Boot的体育商品推荐系统

一、系统背景与目的 随着电子商务的快速发展和人们健康意识的提高&#xff0c;体育商品市场呈现出蓬勃发展的态势。然而&#xff0c;传统的体育商品销售方式存在商品种类繁多、用户选择困难、个性化需求无法满足等问题。为了解决这些问题&#xff0c;基于Spring Boot的体育商品…

在 DDD 中优雅的发送 Kafka 消息

前言 1:host 映射 下载 SwitchHost 配置一个映射地址。点击 添加一个本地环境&#xff0c;之后配置你的 IP kafka 这样就能找这个地址了。IP 为你本地的IP&#xff0c;如果是云服务器就是公网IP地址 使用docker-compose.yml进行一键部署安装 version: 3.0 # docker-compose …

数字电视标准与分类

数字电视相关内容是一个极其成熟且久远的领域&#xff0c;并不像其它的技术方面那么前沿。但是学习技术的另外一个方面也不就是可以维持咱们的好奇心以及认识生活中多个事务后面的技术本质。 近年来&#xff0c;电视领域发生了一系列的变化&#xff0c;电视数字化的进程明显加快…

AI视频配音技术创新应用与商业机遇

随着人工智能技术的飞速发展&#xff0c;AI视频配音技术已经成为内容创作者和营销人员的新宠。这项技术不仅能够提升视频内容的吸引力&#xff0c;还能为特定行业带来创新的解决方案。本文将探讨AI视频配音技术的应用场景&#xff0c;并讨论如何合法合规地利用这一技术。 AI视频…

Airbus结构数字样机理念及实践(转)

关注作者 1、数字样机的背景 早期的设计文档通过二维工程图来描述&#xff0c;对工程师来说&#xff0c;绘制工程图足够表达设计思想&#xff0c;工程图成为了标准的“工程师语言”。但是外围的用户通常通过透视图来表达设计意图&#xff0c;不得不产生了大量针对不同教育背景…

UNIAPP框架uView初步集成与开发设计

uView UI&#xff0c;是uni-app生态最优秀的UI框架&#xff0c;全面的组件和便捷的工具会让您信手拈来&#xff0c;如鱼得水。本文章分享UNIAPP集成使用uView页面动态开发设计。 一、使用HBuilder X 直接导入插件&#xff0c;下载后重启 uView - DCloud 插件市场 二、配置样…

【图像处理lec7】图像恢复、去噪

目录 一、图像退化与恢复概述 二、图像退化中的噪声模型 1、使用 imnoise 函数添加噪声 &#xff08;1&#xff09;imnoise 函数的概述 &#xff08;2&#xff09;函数语法 &#xff08;3&#xff09;支持的噪声类型与具体语法 &#xff08;4&#xff09;噪声类型的详细…

dpdk中udp包的接受与发送

预备知识 dpdk中一些关键宏定义与结构体定义 以太网帧相关 宏RTE_ETHER_ADDR_LEN mac地址长度&#xff0c;6字节48位 宏RTE_ETHER_TYPE_IPV4 代表ipv4 struct rte_ether_hdr 以太网帧头结构体&#xff0c;包含了三个成员变量&#xff0c;目的地址&#xff0c;源地址&#…

C语言进阶(2) ---- 指针的进阶

前言&#xff1a;指针的主题&#xff0c;我们在初阶的《指针》章节已经接触过了&#xff0c;我们知道了指针的概念&#xff1a; 1.指针就是个变量&#xff0c;用来存放地址&#xff0c;地址唯一标识一块内存空间。 2.指针的大小是固定的4/8个字节(32位平台/64位平台)。 3.指针是…

项目整体结构优化

文章目录 1.依赖配置方式1.作为专门管理依赖的模块2.作为父模块3.作为子模块4.注意事项1.关于relativePath的配置2.关于打包的配置3.遇到maven报错的解决方案1.首先刷新maven2.从子模块开始clean-install3.最终:在最顶级的模块clean-package 2.概览3.新建一个子模块sun-depende…

计算机视觉-边缘检测

图片分类 一张图片中可能有多个需要识别的物体&#xff0c;会用方框标注他们的位置和类别 例&#xff1a; 给出一张照片&#xff0c;计算机需要从中识别出这是一只猫 一张图片的计算量是较大的&#xff0c;这张图片的尺寸虽然是6464&#xff0c;因为每张图片有3个颜色通道&am…

多模块应用、发布使用第三方库(持续更新中)

目录: 1、多模块概述&#xff08;HAP、HSP、HAR&#xff09; HAR与HSP两种共享包的主要区别体现在&#xff1a; 2、三类模块&#xff1a; 3、创建项目&#xff1a;项目名&#xff1a;meituan &#xff08;1&#xff09;创建Ability类型的Module&#xff0c;编译后为HAP文件…

安卓 文件管理相关功能记录

文件管理细分为图片、视频、音乐、文件四类 目录 权限 静态声明权限 动态检查和声明权限方法 如何开始上述动态申请的流程 提示 图片 获取图片文件的对象列表 展示 删除 视频 获取视频文件的对象列表 获取视频file列表 按日期装载视频文件列表 展示 播放 删除…

CHIMA网络安全攻防大赛经验分享

比赛模式 第一轮&#xff1a;20分钟基础知识赛&#xff08;50道题&#xff09; 安全运维&#xff0c;法律法规&#xff0c;linux操作系统等 第二轮&#xff1a;50分钟CTF夺旗&#xff08;5道题&#xff09; 题目涵盖 密码学 运用多种工具&#xff0c;如ASCII对照&#xff0c…

QT 国际化(翻译)

QT国际化&#xff08;Internationalization&#xff0c;简称I18N&#xff09;是指将一个软件应用程序的界面、文本、日期、数字等元素转化为不同的语言和文化习惯的过程。这使得软件能够在不同的国家和地区使用&#xff0c;并且可以根据用户的语言和地区提供本地化的使用体验。…