elementui select中添加新增标签

javascript 复制代码
 <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>
javascript 复制代码
 ruleForm: {
        eventType: "",
      },
 eventTypeOptions: [
        {
          value: "1",
          label: "水污染",
        },
        {
          value: "2",
          label: "水污染1",
        },
      ],
javascript 复制代码
    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);
            };
          }
        }
      });
    },
相关推荐
军军君014 分钟前
Three.js基础功能学习十六:智能黑板实现实例三
前端·javascript·css·vue.js·3d·前端框架·threejs
海上彼尚10 分钟前
SVG矢量图形快速入门
前端·html5
嗷o嗷o17 分钟前
Android App Functions 深入理解
前端
qq_208154088521 分钟前
瑞树6代流程分析
javascript·python
UXbot24 分钟前
AI原型设计工具评测:从创意到交互式Demo,5款产品全面解析
前端·ui·设计模式·ai·ai编程·原型模式
落魄江湖行25 分钟前
硅基同事埋的坑,我用2小时才填平:Nuxt 4 路由踩坑:可选参数 [[id]] 与 [id] 的区别
前端
一勺菠萝丶31 分钟前
管理后台使用手册在线预览与首次登录引导弹窗实现
java·前端·数据库
军军君0131 分钟前
Three.js基础功能学习十四:智能黑板实现实例一
前端·javascript·css·typescript·前端框架·threejs·智能黑板
小村儿33 分钟前
连载05-Claude Skill 不是抄模板:真正管用的 Skill,都是从实战里提炼出来的
前端·后端·ai编程
xiaotao13140 分钟前
JS new 操作符完整执行过程
开发语言·前端·javascript·原型模式