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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【数据分析实战】华住集团酒店行业洞察:节假日与工作日表现对比

文章目录 1. 写在前面2. 数据采集源介绍2.1 数据展示 3. 节假日与工作日入住率对比3.1 入住率数据3.2 数据可视化3.3 本人浅薄分析 4. 节假日与工作日日均价对比4.1 日均价数据4.2 数据可视化4.3 本人浅薄分析 5. 总结与展望 1. 写在前面 随着旅游业的蓬勃发展和疫情逐渐得到控…

使用docker部署nextcloud

一、思路&#xff1a;数据库使用容器外mysql(宿主机),同时把容器中nextcloud文件目录映射到容器外&#xff0c;即宿主机。 1、创建数据库和用户&#xff0c;并授权 [rootappserver ~]# /usr/local/mysql57/bin/mysql -uroot -p mysql> create database nextcloud charset ut…

C++智能指针介绍

引言 为了充分利用RAII思想&#xff0c;C 11开始引入了智能指针&#xff0c;本文介绍RAII以及三种智能指针&#xff1a; std::unique_ptrstd::shared_ptrstd::weak_ptr 除此之外&#xff0c;本文还会介绍智能指针的常用创建方法&#xff1a; std::make_uniquestd::make_sha…

珠海盈致wms管理软件在注塑行业的应用

wms管理软件在注塑行业的应用主要体现在以下几个方面&#xff1a; 实现物料精细化管理&#xff1a;WMS通过为每个原材料或成品进行条码标签&#xff0c;能够显示原材料和成品的详细信息&#xff0c;如产品名称、条码编号、生产日期、入库日期、供应商等。在入库、出库、库内管理…

three.js(二)

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

Web漏洞分析-文件解析及上传(下)

随着互联网的迅速发展&#xff0c;网络安全问题变得日益复杂&#xff0c;而文件解析及上传漏洞成为攻击者们频繁攻击的热点之一。本文将深入研究文件解析及上传漏洞&#xff0c;通过对文件上传、Web容器IIS、命令执行、Nginx文件解析漏洞以及公猫任意文件上传等方面的细致分析&…

代驾系统开发:驶向未来的智能交通服务

随着科技的迅速发展&#xff0c;代驾系统的开发成为改善出行体验和提升交通服务智能化的重要一环。本文将聚焦于代驾系统开发的技术创新&#xff0c;为读者呈现其中涉及的一些令人振奋的技术代码。 1. 区块链技术的运用&#xff1a; 区块链技术被引入代驾系统&#xff0c;可…

尚海整装装修流程 揭秘装修行业的高标准服务

装修房子其实比较复杂&#xff0c;在这一复杂的过程中&#xff0c;一个合理且严密的装修流程显得尤为关键。错误的步骤安排不仅会造成资源的浪费&#xff0c;更有可能让人产生“弃屋重装”的冲动。尚海整装以精准的流程规划确保了装修的每一步都有序进行&#xff0c;轻松搞定装…

人工智能与VR技术

人工智能与虚拟现实技术&#xff08;VR&#xff09;的结合是当今科技领域中备受瞩目的话题。两者的结合不仅在娱乐、教育、医疗等领域展现出了巨大的潜力&#xff0c;而且在未来的发展趋势中也将具有重要意义。本文将从技术融合、应用场景和未来发展等方面探讨人工智能与虚拟现…

激荡思享 驱动增长 | 湾数联·湾董会走进竹云

12月12日&#xff0c;由湾区数字科技产业联盟&#xff08;GBADA&#xff09;、湾盟产业创新服务中心&#xff08;GBAIC&#xff09;、深圳竹云科技股份有限公司联合主办的“湾数联湾董会”第一期在深圳南山区创智云城圆满举办。本期湾董会以“竹云IDaaS数字身份为企业数字化转型…

select简单使用

语法 先大致看一下&#xff0c;后面都会讲&#xff0c;distinct用来去重&#xff0c;from 指明表名&#xff0c;where语句则用来控制查询条件&#xff0c;order by则用来对结果进行升序/降序排序&#xff0c;limit则用来分页。 SELECT [DISTINCT] {* | {column [, column] ..…

mysqlsh导入json,最终还得靠navicat导入json

工作需要将一个巨大的10G的json导入mysql数据库。 看到mysql官方有对json导入的支持。 如下&#xff1a; MySQL :: Import JSON to MySQL made easy with the MySQL Shell $ mysqlsh rootlocalhost:33300/test --import /path_to_file/zips.json Creating a session to root…

Linux——进程地址空间与进程控制

进程地址空间与进程控制 文章目录 进程地址空间与进程控制1. 进程地址空间1.1 进程地址空间的引入1.1 进程地址空间的特点1.2 页表1.3 C/C的地址1.4 进程地址空间 页表的优势 2. 进程控制2.1 进程创建2.1.1 写时拷贝 2.2 进程终止2.2.1 进程退出码2.2.2 异常信号码2.2.3 errno…

阿里巴巴旗下的 AI 平台 AIHub 提供多种免费的图片 AI 在线工具

顽兔抠图&#xff1a;一键去除图像背景的 AI 工具&#xff0c;支持图片和视频。顽兔抠图 淘宝网(Taobao.com)作为专业的购物网站拥有全球时尚前沿的消费者购物集市,100%认证网上商城及超值二手商品区&#xff0c;同时购物安全&#xff0c;产品丰富&#xff0c;应有尽有,任你选购…

解决固定资产盘点问题,易点易动来帮忙!

固定资产盘点是企业管理中不可或缺的环节&#xff0c;然而&#xff0c;很多企业在固定资产盘点方面面临一系列问题&#xff1a; 盘点过程繁琐&#xff1a;传统的手动盘点方式需要耗费大量人力和时间&#xff0c;容易出现疏漏和错误&#xff0c;效率低下&#xff1b; 数据记录不…

uniapp 之 图片 视频 文件上传

<view class"" style"padding: 24rpx 0"><text>相关资料 <text class"fs-26 color-666">&#xff08;图片、视频、文档不超过9个&#xff09;</text> </text><view class"flex align-center" style&…

安全算法(二):共享密钥加密、公开密钥加密、混合加密和迪菲-赫尔曼密钥交换

安全算法&#xff08;二&#xff09;&#xff1a;共享密钥加密、公开密钥加密、混合加密和迪菲-赫尔曼密钥交换 本章介绍了共享密钥加密、公开密钥加密&#xff0c;和两种加密方法混合使用的混合加密方法&#xff1b;最后介绍了迪菲-赫尔曼密钥交换。 加密数据的方法可以分为…

Day09 Liunx高级系统设计11-数据库1

MySQL 简介 数据库DB 数据库&#xff08; DataBase &#xff0c; DB &#xff09;从本质上讲就是一个文件系统&#xff0c;它能够将数据有组织地集合在一起&#xff0c;按照一定的规则长期存储到计算机的磁盘中&#xff0c;并且能够供多个用户共享和使用&#xff0c;同时&…

Leetcode—459.重复的子字符串【简单】

2023每日刷题&#xff08;五十九&#xff09; Leetcode—459.重复的子字符串 算法思想 巧解的算法思想 实现代码 从第一个位置开始到s.size()之前&#xff0c;看s字符串是否是ss的子串 class Solution { public:bool repeatedSubstringPattern(string s) {return (s s).fin…

西南科技大学数字电子技术实验七(4行串行累加器设计及FPGA实现)FPGA部分

一、实验目的 1、掌握基于Verilog语言的diamond工具设计全流程。 2、熟悉、应用Verilog HDL描述数字电路。 3、掌握Verilog HDL的组合和时序逻辑电路的设计方法。 4、掌握“小脚丫”开发板的使用方法。 二、实验原理 三、程序清单&#xff08;每条语句必须包括注释或在开发…