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.mzph.cn/news/221170.shtml

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

相关文章

多域名SSL证书选择什么品牌比较好?

选择适合的品牌是申请多域名SSL证书的重要一步。不同品牌的SSL证书提供商在性能、安全性和客户支持等方面各有特点。本文将详细介绍选择多域名SSL证书品牌时应考虑的因素&#xff0c;并推荐几个知名的SSL证书品牌。 首先&#xff0c;我们需要考虑的是品牌的声誉和可靠性。选择一…

短地址漏洞

漏洞条件&#xff1a; 当地址的长度不足 20 byte (40个十六进制字符) 时&#xff0c;以太坊虚拟机 EVM 会进行高位补0x0转发以太币时没有对地址长度进行验证 1. input 数据 交易的 input 数据分为三个部分&#xff1a; 1&#xff09;4字节&#xff0c;是方法名的Hash值&…

MySQL_11.InnoDB Buffer Pool原理与配置

1.buffer pool原理 (1)innodb_buffer_pool_instances&#xff1a; windows default 1个实例、windows default 8个实例; 将热点打散,提高并发的性能改善并发,通过降低竞争因为不同的线程读和写cached pages&#xff08;缓存页&#xff09; 内存小于1G默认1个,这个选项只有当设置…

Android开发中压缩文件和文件夹

Android开发中&#xff0c;我们经常会遇到上传文件&#xff0c;用到压缩文件、文件夹的功能&#xff0c;今天我们主要讲解这个功能&#xff0c;具体的实现如下&#xff1a; /*** 压缩文件和文件夹** param srcFileString 要压缩的文件或文件夹* param zipFileString 压缩完成的…

【论文极速读】视频检索中的模态均衡方法

【论文极速读】视频检索中的模态均衡方法 FesianXu 20231206 at Baidu Search Team 前言 传统的视频搜索系统相关性部分主要以文本匹配为基础手段&#xff0c;在其中引入多模态向量容易收到『模态不均衡』的问题&#xff0c;论文[1]尝试对其进行解决&#xff0c;本文进行笔记。…

【算法技术专题】精彩解密KMP算法之跃进式搜索的深度探索

KMP算法 KMP算法介绍KMP算法历史KMP算法思路性能损耗算法思路结构模型准备KMP算法的实现步骤生成next数组构建next数组原理生成nexf数组代码实现 代码案例解释说明 字符串对比操作代码案例解释说明 算法效果 KMP算法介绍 KMP算法&#xff08;Knuth-Morris-Pratt算法&#xff0…

02markdown-学习笔记

一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 换行符<br>标签 写入一段测试用的正文第二段测试文本,如果要对文本进行换行可以使用<br>标签 文本修饰符 字体为斜体的修饰&#xff0c;一对星号包含 字符为粗体&#xff0c;两对星号包含 字体为…

springboot 拦截器之Advisor不生效问题

SPringBoot使用方法注解拦截器时遇到不生效问题记录&#xff1a; 定义方法注解 Target({ElementType.TYPE, ElementType.METHOD}) Retention(RetentionPolicy.RUNTIME) Inherited Documented public interface DataScope {boolean enable() default true;}定义 Advisor Getter…

出现 java: 找不到符号 符号: 变量 log 的解决方法

目录 1. 问题所示2. 原理分析3. 解决方法3.1 增加编译参数3.2 增加lombok插件3.3 清楚本地缓存1. 问题所示 使用Springboot启动项目的时候,出现如下bug: java: 找不到符号符号: 变量 log位置: 类 org.springblade.example.consumer.rpc.BlogStu

如何定位线上OOM?

文章目录 造成OOM的原因1.一次性申请的太多2. 内存资源耗尽未释放3.本身资源不够 如何快速定位OOM&#xff1f;1.系统已经OOM了2.系统运行中还未OOM2.1导出dump文件&#xff1a;2.2.结合jvisualvm进行调试2.3 利用ArthasArthas可以做什么&#xff1f;如何使用Arthas小结 造成OO…

Docker常用命令总结

文章目录 Docker命令总结 Docker命令总结 简介&#xff1a;Docker是一个基于轻量级虚拟化技术的容器&#xff0c;整个项目基于Go语言开发&#xff0c;并采用了Apache 2.0协议。Docker可以将我们的应用程序打包封装到一个容器中&#xff0c;该容器包含了应用程序的代码、运行环…

【带头学C++】----- 九、类和对象 ---- 9.13 运算符重载——(9.13.7-9.13.8)

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️创做不易&#xff0c;麻烦点个关注❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ ❤️❤️❤️❤️❤️❤️❤️❤️❤️文末有惊喜&#xff01;献舞一支&#xff01;❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ 目录 9.13…

Git篇---第九篇

系列文章目录 文章目录 系列文章目录前言一、使用过git merge和git rebase吗?它们之间有什么区别?二、使用过git cherry-pick,有什么作用?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看…

GPIO模拟MDIO

背景 CPU&#xff1a;AST2500 驱动里实现GPIO模拟MDIO驱动,参考内核驱动mdio-bitbang.c和mdio-gpio.c&#xff0c;当前项目不支持设备树&#xff0c;驱动需要改成platform注册 MDIO介绍 SMI接口 SMI是MAC内核访问PHY寄存器接口&#xff0c;它由两根线组成&#xff0c;双工…

旅游规划

有了一张自驾旅游路线图&#xff0c;你会知道城市间的高速公路长度、以及该公路要收取的过路费。现在需要你写一个程序&#xff0c;帮助前来咨询的游客找一条出发地和目的地之间的最短路径。如果有若干条路径都是最短的&#xff0c;那么需要输出最便宜的一条路径。 输入格式: …

c++ qt 窗口开发中 俩按钮组合 配合 显影 已解决

在日常项目中&#xff0c;有这么需求&#xff0c;还想窗口移动&#xff0c;还想 右侧关闭 还能tab栏点击显影的需求&#xff0c;不得使用 qt模拟点击事件 进行功能优化 特大杯 大杯 控制 窗口显影&#xff0c; 咖啡 按钮 显示窗口 可乐 豆浆 不显示窗口 四个按钮的 互斥关…

Amazon SageMaker机器学习之旅的助推器

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 亚马逊云科技开发者社区, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道。 一、前言 在当今的数字化时代&#xff0c;人工智能和机器学习已经…

Android Studio报Gradle问题解决思路

Gradle的版本号与Android studio版本、AGP&#xff08;Android Gradle Plugin&#xff09;版本、jdk版本都有关系。只有同时匹配三个版本号&#xff0c;才能使用对应的Gradle版本。 1、AGP的版本号与Android studio版本的关系。 Google 搜索 Android studio gradle plugin re…

2023一起益企广东省中小企业数字化赋能活动(深圳站)成功举办

12月12日&#xff0c;由广东工业和信息化厅指导&#xff0c;广东省中小企业服务中心、深圳市中小企业服务局主办&#xff0c;深圳联通承办的2023年“一起益企”广东省中小企业数字化赋能专项对接志愿服务活动&#xff08;深圳站&#xff09;在深圳成功举办。 本次活动涵盖中小企…

【AI底层逻辑】——“数学华尔兹”之一元线性回归

一元线性回归模型想必大家都耳熟能详&#xff0c;这里不再赘述。但在使用python中机器学习包时一定见过类似模型评价参数的输出&#xff0c;这一章我们就讲一讲回归分析里一些模型评价概念&#xff01; 一、方差分析ANOVA 方差分析是一种用于确定线性回归模型中不同变量对目标…