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

elementui select中添加新增标签

在这里插入图片描述

 <el-select v-model="ruleForm.eventType" :placeholder="`请选择事件类型,可手动添加`" ref="template" clearable @visible-change="(v) => visibleChange(v, 'template')"><el-option v-for="item in eventTypeOptions" :key="item.value" :label="item.label" :value="item.value">{{ item.label }}<div class="flag" @click="showShipTemplate(item.code, true)"></div></el-option></el-select>
 ruleForm: {eventType: "",},eventTypeOptions: [{value: "1",label: "水污染",},{value: "2",label: "水污染1",},],
    showShipTemplate() {this.$prompt(`请输入新的类型`, "提示", {confirmButtonText: "确定",cancelButtonText: "取消",inputValidator: (value) => {//非空验证if (!value) {return "请输入内容";}},}).then(({ value }) => {this.ruleForm.eventType = value;this.eventTypeOptions.push({value: value,label: value,});console.log("确定");}).catch(() => {this.$message({type: "info",message: "取消输入",});});},visibleChange(visible, refName) {this.$nextTick(() => {if (visible) {const ref = this.$refs[refName];let popper = ref.$refs.popper;if (popper.$el) popper = popper.$el;if (!Array.from(popper.children).some((v) => v.className === "el-template-menu__list")) {const el = document.createElement("ul");el.className = "el-template-menu__list";el.style ="border-bottom:2px solid rgb(219 225 241); padding:0; color:rgb(64 158 255);font-size: 13px;margin: 0px;text-align: center; ";el.innerHTML = `<li class="el-cascader-node text-center" style="height:36px;line-height: 36px;"><span class="el-cascader-node__label"><i class="font-blue el-icon-plus"></i>新增类型</span></li>`;// console.log(popper.childNode,'sssssssssssssss')// console.log(popper.children[0], "231111111111");// console.log(popper, "popper");if (this.isUp) {popper.insertBefore(el, popper.children[0]);} else {popper.appendChild(el);}el.onclick = () => {this.showShipTemplate(null, false);};}}});},

相关文章:

elementui select中添加新增标签

<el-select v-model"ruleForm.eventType" :placeholder"请选择事件类型&#xff0c;可手动添加" ref"template" clearable visible-change"(v) > visibleChange(v, template)"><el-option v-for"item in eventTypeOp…...

图像截屏公式识别——LaTeX-OCR安装与使用

一、简介 LaTeX-OCR 是一个开源的光学字符识别&#xff08;OCR&#xff09;软件&#xff0c;专为 LaTeX 文档提供支持。其主要目的是帮助用户将扫描的文档转换为 LaTeX 编辑器可以使用的可编辑文本&#xff0c;从而方便进行修改、编辑和排版。LaTeX广泛用于科技、数学、工程等…...

LabVIEW与Tektronix示波器实现电源测试自动化

LabVIEW与Tektronix示波器实现电源测试自动化 在现代电子测试与测量领域&#xff0c;自动化测试系统的构建是提高效率和精确度的关键。本案例介绍了如何利用LabVIEW软件结合Tektronix MDO MSO DPO2000/3000/4000系列示波器&#xff0c;开发一个自动化测试项目。该项目旨在自动…...

青少年CTF-Crypto(Morse code/ASCII和凯撒)

FLAG&#xff1a;你这一生到底想干嘛 专研方向: Web安全 &#xff0c;Md5碰撞 每日emo&#xff1a;不要因为别人都交卷了&#xff0c;就乱选答案 文章目录 1.Morse code2、ASCII和凯撒的约定 1.Morse code 题目提示摩尔斯电码&#xff0c;这个是给的附件 直接用摩尔斯解密&am…...

Vue3-16-【v-model】 表单数据绑定

作用描述 v-model 指令&#xff0c;实现了 表单输入组件的值 与 js 中的变量的值的绑定关系。 当我们在页面上执行输入动作时&#xff0c;js中变量的值也会同步发生变化。表单不仅仅局限于输入框&#xff0c;其他的如 &#xff1a; 单选按钮&#xff0c;复选框&#xff0c;下拉…...

【Flink on k8s】- 12 - Flink kubernetes operator 的高级特性

目录 1、自动伸缩 1.1 工作原理 1.2 Job 要求和限制 1.2.1 要求 1.2.2 限制...

量子芯片技术:未来的计算革命

量子芯片技术&#xff1a;未来的计算革命 一、引言 随着科技的不断发展&#xff0c;人类正在进入一个全新的技术时代&#xff0c;即量子时代。量子芯片技术作为这个时代的重要代表&#xff0c;正逐渐改变我们对计算和信息处理的理解。本文将深入探讨量子芯片技术的基本原理、…...

vaptcha-手势验证码

很外向&#xff0c;上班总想坐老板的位置。 网址&#xff1a;https://www.vaptcha.com/#demo 第一次接触是在大学刚毕业的时候&#xff0c;搞了一半就没搞了。时隔1年多&#xff0c;回来看看。 难点&#xff0c;图片还原&#xff0c;轨迹&#xff0c;canvas校验等。 轨迹的…...

【一种用opencv实现高斯曲线拟合的方法】

背景&#xff1a; 项目中需要实现数据的高斯拟合&#xff0c;进而提取数据中标准差&#xff0c;手头只有opencv库&#xff0c;经过资料查找验证&#xff0c;总结该方法。 基础知识&#xff1a; 1、opencv中solve可以实现对矩阵参数的求解&#xff1b; 2、线的拟合就是对多项…...

find_package 和 find_library的区别

背景 经常看CMakeLists.txt中有find_package和find_library&#xff0c;有时候没留意以为都一样&#xff0c;其实二者差距比较大&#xff0c;下面简单记录一下。 find_package find_package(NAME), 这段代码的本质就是在找一个NAME.cmake这个文件&#xff0c;一般在安装库的…...

socket是如何进行通信的

Socket通信的原理大致分为以下几个步骤&#xff1a; 服务器端建立Socket&#xff0c;开始侦听整个网络中的连接请求。当检测到来自客户端的连接请求时&#xff0c;向客户端发送收到连接请求的信息&#xff0c;并建立与客户端之间的连接。当完成通信后&#xff0c;服务器关闭与…...

STM32-固件打包部署

STM32-固件打包部署 Fang XS.1452512966qq.com STM32固件输出 工程上使用Keil开发STM32软件&#xff1b;在调试过程中&#xff0c;可直接编译下载&#xff1b;例如bootloader和APP&#xff0c;在调试时&#xff0c;可以直接下载2次&#xff1b;但是工程上&#xff0c;需要大…...

微信机器人如何使用?好用吗?好奇

随着微信的使用范围越来越大&#xff0c;所以人一多&#xff0c;管理起来就会遇到很多繁琐的情况需要仍去操作。 比如需要手动一个个通过好友验证&#xff0c;发消息&#xff0c;相同问题一遍遍的回答&#xff0c;消息还容易看漏&#xff0c;回复不过来...... 想着如果有什么可…...

ARMV8 - A64 - 函数调用,内存栈操作

说明 看了下ARM平台上C语言函数调用的反汇编代码&#xff0c;理清楚了其中的内存栈汇编操作&#xff0c;特整理下。本文环境基于&#xff1a;ARMv8-a架构A53核soc&#xff0c;aarch64状态。 预先了解的知识点 内存栈 栈和栈帧的基本概念重点&#xff1a;出栈入栈的单位不是…...

MyBatis 四大核心组件之 ResultSetHandler 源码解析

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…...

docker-compose 单机容器编排

docker-compose 单机容器编排 Dockerfile&#xff1a;先配置好的文件&#xff0c;然后bulid&#xff0c;镜像容器。 docker-compose 既可以基于dockerfile&#xff0c;也可以基于镜像&#xff0c;一键式拉起镜像和容器。 docker-compose 核心就是yml文件&#xff0c;可以定义…...

springboot项目使用Layui作为前端UI的一系列前后端交互的解决方法

背景&#xff1a; 因为比较喜欢Layui&#xff0c;因为多个项目都是从零开始就使用的layui开发的&#xff0c;并且开发过程中借鉴了很多其他项目&#xff08;如Ruoyi、Pear Admin&#xff09;&#xff0c;因此最终选用大部分Pear Admin的项目中使用的一系列解决方案&#xff0c;…...

【Linux】Firewalld防火墙新增端口、开启、查看等

Linux操作系统中&#xff0c;Firewalld防火墙相关操作如下&#xff1a; 安装 yum install firewalld firewalld-configFirewall开启常见端口命令 新增端口&#xff1a; firewall-cmd --zonepublic --add-port80/tcp --permanentfirewall-cmd --zonepublic --add-port443/tc…...

学习笔记 -- TVS管选型参考

一、TVS管基本工作原理 当TVS管(瞬态电压抑制器)两极受到反向瞬态高能量冲击时&#xff0c;能以纳秒(ns)量级的速度&#xff0c;将两极间的高阻抗变为低阻抗&#xff0c;使两极间的电压箝位于一个预定的值&#xff0c;有效地保护电子线路中的元器件。 在浪涌电压作用下&#xf…...

功能更新|免费敏捷工具Leangoo领歌私有部署新增第三方身份认证和API对接

Leangoo领歌是一款永久免费的专业的敏捷开发管理工具&#xff0c;提供端到端敏捷研发管理解决方案&#xff0c;涵盖敏捷需求管理、任务协同、进展跟踪、统计度量等。 Leangoo支持敏捷研发管理全流程&#xff0c;包括小型团队敏捷开发&#xff0c;规模化敏捷SAFe&#xff0c;Scr…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...