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

相关推荐

  1. 4. git 添加版本标签

    2023-12-12 09:04:02       43 阅读
  2. Prometheus 服务发现 添加标签

    2023-12-12 09:04:02       37 阅读
  3. vue项目添加改变浏览器标签title的标题

    2023-12-12 09:04:02       63 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-12 09:04:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-12 09:04:02       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-12 09:04:02       82 阅读
  4. Python语言-面向对象

    2023-12-12 09:04:02       91 阅读

热门阅读

  1. Linux-RedHat系统-安装 中间件 Tuxedo

    2023-12-12 09:04:02       60 阅读
  2. 【前端设计模式】之解释器模式

    2023-12-12 09:04:02       57 阅读
  3. 在Go中定义方法

    2023-12-12 09:04:02       67 阅读
  4. 【常用字符大全】含emoji表情

    2023-12-12 09:04:02       48 阅读
  5. MT1509 查找子串2(BF)

    2023-12-12 09:04:02       57 阅读