elementui select中添加新增标签

elementui select中添加新增标签_第1张图片

 <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 = `
  • 新增类型
  • `
    ; // 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); }; } } }); },

    你可能感兴趣的:(elementui,前端,javascript)