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