element ui select 点击option里的按钮，如何禁止他自动收起？

Z时代
2024-02-05
分类：IT

请教需求：点击删除按钮的时候，这个下拉框禁止他自动收起
element ui select 点击option里的按钮，如何禁止他自动收起？

<template>
  <div class="app-container home">
    <el-select
      v-model="value"
      @change="handleTagChange"
      filterable
      ref="configSelect"
    >
      <el-option
        v-for="tag in userTags"
        :key="tag.id"
        :label="tag.label"
        :value="tag.name"
      >
        <span style="float: left">{{ tag.label }}</span>
        <el-tag
          v-if="true"
          size="mini"
          effect="dark"
          type="danger"
          style="float: right; margin-top: 8px; margin-left: 3px"
          @click.stop="handleDeleteTag(tag.name, $event)"
        >
          删除
        </el-tag>
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      userTags: [
        {
          name: "1",
          label: "黄金糕",
        },
        {
          name: "2",
          label: "双皮奶",
        },
        {
          name: "3",
          label: "螺蛳粉",
        }
      ],
      value: "",
    };
  },
  methods: {
    handleTagChange(e){
      console.log(e)
    },
    handleDeleteTag (tag) {
      this.$refs.configSelect.visible = false
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs.configSelect.visible = false
        // console.log(tag.id)
        this.userTags = this.userTags.filter((v,i)=>{
          return tag != v.name
        })
      })
    }
  },
};
</script>