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);};}}});},

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【离散数学】——期末刷题题库(欧拉图和哈密顿图)

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

遥感图像之多模态检索AMFMN(支持关键词、句子对图像的检索)论文阅读、环境搭建、模型测试、模型训练

一、论文阅读 1、摘要背景 遥感跨模态文本图像检索以其灵活的输入和高效的查询等优点受到了广泛的关注。然而&#xff0c;传统的方法忽略了遥感图像多尺度和目标冗余的特点&#xff0c;导致检索精度下降。为了解决遥感多模态检索任务中的多尺度稀缺性和目标冗余问题&#xff…

从零构建属于自己的GPT系列6:模型部署2(文本生成函数解读、模型本地化部署、文本生成文本网页展示、代码逐行解读)

&#x1f6a9;&#x1f6a9;&#x1f6a9;Hugging Face 实战系列 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在PyCharm中进行 本篇文章配套的代码资源已经上传 从零构建属于自己的GPT系列1&#xff1a;数据预处理 从零构建属于自己的GPT系列2&#xff1a;模型训…

电子取证中Chrome各版本解密Cookies、LoginData账号密码、历史记录

文章目录 1.前置知识点2.对于80.X以前版本的解密拿masterkey的几种方法方法一 直接在目标机器运行Mimikatz提取方法二 转储lsass.exe 进程从内存提取masterkey方法三 导出SAM注册表 提取user hash 解密masterkey文件&#xff08;有点麻烦不太推荐&#xff09;方法四 已知用户密…

剧本杀小程序成为创业者新选择,剧本杀小程序开发

剧本杀作为现下年轻人最喜欢的新兴行业&#xff0c;发展前景非常乐观&#xff0c;即使剧本杀目前处于创新发展阶段&#xff0c;但剧本杀行业依然在快速发展中。 根据业内数据&#xff0c;预计2025年剧本杀市场规模能达到四百多亿元。市场规模的扩大自然也吸引来了不少的创业者…

蓝桥杯航班时间

蓝桥杯其他真题点这里&#x1f448; //飞行时间 - 时差 已过去的时间1 //飞行时间 时差 已过去的时间2 //两个式子相加会发现 飞行时间 两段时间差的和 >> 1import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader;public cl…

如何学习Kubernetes,学习K8S入门教程

学习 Kubernetes&#xff08;K8s&#xff09;确实不容易 你的硬件资源有限时&#xff0c;不过别担心&#xff0c;我帮你理清思路&#xff0c;让你在学习 K8s 的路上更加从容。 1、资源限制下的学习方法 当硬件资源有限时&#xff0c;一个好的选择是使用云服务提供的免费层或者…

最新鸿蒙HarmonyOS4.0开发登陆的界面2

登陆功能 代码如下&#xff1a; import router from ohos.router; Entry Component struct Index {State message: string XXAPP登陆State userName: string ;State password: string ;build() {Row() {Column({space:50}) {Image($r(app.media.icon)).width(200).interpol…

【EI会议征稿】第三届电力系统与电力工程国际学术会议(PSPE 2024)

第三届电力系统与电力工程国际学术会议&#xff08;PSPE 2024&#xff09; 2024 3rd International Conference on Power System and Power Engineering(PSPE 2024) 第三届电力系统与电力工程国际学术会议&#xff08;PSPE 2024&#xff09;于2024年3月29-31日在中国三亚隆重召…

DM8/达梦 数据库管理员使用手册详解

1.1DM客户端存放位置 Windows&#xff1a;DM数据库安装目录中tool文件夹和bin文件夹中。 Linux&#xff1a;DM数据库安装目录中tool目录和bin目录中。 1.2DM数据库配置助手 1.2.1Windows创建数据库 打开数据库配置助手dbca 点击创建数据库实例 选择一般用途 浏览选择数据库…

Shrio 安全框架

目录 前言 1.介绍 2.整合 Shiro 到 Spring Boot 3.Shiro 相关配置 总结 前言 几乎所有涉及用户的系统都需要进行权限管理&#xff0c;权限管理涉及到一个系统的安全。Spring Boot 的安全框架整合方案中还有一个璀璨的明珠&#xff1a;Shrio。 1.介绍 Shiro是一款由Java 编…

SQL自学通之函数 :对数据的进一步处理

目录 一、目标 二、汇总函数 COUNT SUM AVG MAX MIN VARIANCE STDDEV 三、日期/时间函数 ADD_MONTHS LAST_DAY MONTHS_BETWEEN NEW_TIME NEXT_DAY SYSDATE 四、数学函数 ABS CEIL 和FLOOR COS、 COSH 、SIN 、SINH、 TAN、 TANH EXP LN and LOG MOD POW…

大数据云计算之OpenStack

大数据云计算之OpenStack 1.什么是OpenStack&#xff0c;其作用是什么&#xff1f;OpenStack主要的组成模块有哪些&#xff1f;各自的主要作用是什么&#xff1f; OpenStack是一个开源的云计算平台&#xff0c;旨在为企业和服务提供商提供私有云和公有云的建设和管理解决方案…

c语言堆排序(详解)

堆排序 堆排序是一种基于二叉堆数据结构的排序算法&#xff0c;它的基本概念包括&#xff1a; 建立堆&#xff1a;将待排序的列表构建成一个二叉堆&#xff0c;即满足堆的性质的完全二叉树&#xff0c;可以是最大堆或最小堆。最大堆要求父节点的值大于等于其子节点的值&#x…

LLM之Prompt(三)| XoT:使用强化学习和蒙特卡罗树搜索将外部知识注入Prompt中,性能超过CoT,ToT和GoT

​论文地址&#xff1a;https://arxiv.org/pdf/2311.04254.pdf 一、当前Prompt技术的局限性 LLM使用自然语言Prompt可以将复杂的问题分解为更易于管理的“thought”可以回复用户的问题。然而&#xff0c;大多数现有的Prompt技术都有局限性&#xff1a; 输入输出&#xff08;I…

智能优化算法应用:基于正余弦算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于正余弦算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于正余弦算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.正余弦算法4.实验参数设定5.算法结果6.参考文…

网络协议疑点记录

1.RIP, OSPF,BGP 搞清RIP和OSPF的区别,这是我见过最好的总结! - 知乎 首先什么是自治系统:治系统就是几个路由器组成了一个小团体 ?,小团体内部使用专用的协议进行通信,而小团体和小团体之间也使用专用的协议进行通信。 IGP RIP 距离矢量路由算法,bellman-ford算法,…

【Spring教程28】Spring框架实战:从零开始学习SpringMVC 之 请求与请求参数详解

目录 1 设置请求映射路径1.1 环境准备 1.2 问题分析1.3 设置映射路径 2 请求参数2.1 环境准备2.2 参数传递2.2.1 GET发送单个参数2.2.2 GET发送多个参数2.2.3 GET请求中文乱码2.2.4 POST发送参数2.2.5 POST请求中文乱码 欢迎大家回到《Java教程之Spring30天快速入门》&#xff…

【Python网络爬虫入门教程2】成为“Spider Man”的第二课:观察目标网站、代码编写

Python 网络爬虫入门&#xff1a;Spider man的第二课 写在最前面观察目标网站代码编写 第二课总结 写在最前面 有位粉丝希望学习网络爬虫的实战技巧&#xff0c;想尝试搭建自己的爬虫环境&#xff0c;从网上抓取数据。 前面有写一篇博客分享&#xff0c;但是内容感觉太浅显了…

three.js(二)

three.js&#xff08;二&#xff09; 参考前言正文简单开始(不使用任何框架)补充 粗略带过(使用Vue框架)细致讲解(比如我使用react框架)App.jsx 的进阶版 项目打包补充打包遇到的问题:原因:解决办法: 参考 https://threejs.org/docs/ 前言 上一集中,我们用到了three.js的一个…