当前位置: 首页 > 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);};}}});},
http://www.lryc.cn/news/259657.html

相关文章:

  • 图像截屏公式识别——LaTeX-OCR安装与使用
  • LabVIEW与Tektronix示波器实现电源测试自动化
  • 青少年CTF-Crypto(Morse code/ASCII和凯撒)
  • Vue3-16-【v-model】 表单数据绑定
  • 【Flink on k8s】- 12 - Flink kubernetes operator 的高级特性
  • 量子芯片技术:未来的计算革命
  • vaptcha-手势验证码
  • 【一种用opencv实现高斯曲线拟合的方法】
  • find_package 和 find_library的区别
  • socket是如何进行通信的
  • STM32-固件打包部署
  • 微信机器人如何使用?好用吗?好奇
  • ARMV8 - A64 - 函数调用,内存栈操作
  • MyBatis 四大核心组件之 ResultSetHandler 源码解析
  • docker-compose 单机容器编排
  • springboot项目使用Layui作为前端UI的一系列前后端交互的解决方法
  • 【Linux】Firewalld防火墙新增端口、开启、查看等
  • 学习笔记 -- TVS管选型参考
  • 功能更新|免费敏捷工具Leangoo领歌私有部署新增第三方身份认证和API对接
  • 重生奇迹mu战士加点
  • 【数据结构(十一·多路查找树)】B树、B+树、B*树(6)
  • 弟弟的作业
  • 代码随想录算法训练营第37天|● 738.单调递增的数字 ● 968.监控二叉树 ● 总结
  • 出现 java: 找不到符号 符号: 变量 log 的解决方法
  • 大数据机器学习与深度学习—— 生成对抗网络(GAN)
  • vue前端访问Django channels WebSocket失败
  • 厉害了!水浸监控技术有升级啦
  • 【开题报告】基于SpringBoot的大学生心理教育平台的设计与实现
  • 376. 摆动序列
  • 现在个人想上架微信小游戏已经这么难了吗...