vue element-ui el-select下拉框添加新增按钮，支持行内删除

l2qq · 2022-03-31 17:06

字数 5118 评论 0 收藏 0 点赞 0

vue element-ui el-select下拉框添加新增按钮，支持行内删除

 <el-select
      v-model="form.labels"
      multiple
      :placeholder="$t('goods.qxz_content')"
      ref="template"
      @visible-change="(v) => visibleChange(v, 'template')"
    >
      <el-option
        v-for="(item, index) in labelslist"
        :key="item.code"
        :label="item.value"
        :value="item.value"
      >
        <span style="float: left" class="span-style">{{ item.value }}</span>
        <span
          style="float: right"
          class="span-style"
          @click.stop="delitem(index)"
          ><i class="el-tag__close el-icon-close"
        /></span>
        <div class="flag" @click="showShipTemplate(item.code, true)"></div>
      </el-option>
  </el-select>

 data() {
    return {
      labelslist: [],
    };
  },
  methods: {
    delitem(index) {
      this.labelslist.splice(index, 1);
    },
    // 添加商品标签
    showShipTemplate() {
      this.$prompt("请输入新的商品标签", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(({ value }) => {
        this.labelslist.push({ code: this.labelslist.length, value: value });
      });
    },
    visibleChange(visible, refName) {
      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-top:2px solid rgb(219 225 241); padding:0; color:rgb(64 158 255);font-size: 13px";
          el.innerHTML = `<li class="el-cascader-node text-center" style="height:37px;line-height: 50px;margin-left:10px;">
            <span class="el-cascader-node__label"><i class="font-blue el-icon-plus"></i> 添加商品标签</span>
            </li>`;
          popper.appendChild(el);
          el.onclick = () => {
            this.showShipTemplate(null, false);
          };
        }
      }
    },
  },