el-select中每个option加删除按钮并且可点击

先看效果：

 点击删除后：

                <el-select
                  v-model="trainTaskTags"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请选择或创建标签"
                  style="width: 80%"
                  @change="handleTagChange"
                >
                  <el-option
                    v-for="tag in userTags"
                    :key="tag.id"
                    :label="tag.name"
                    :value="tag.id"
                  >
                    <span style="float: left">{{ tag.name }}</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, $event)"
                    >
                      删除
                    </el-tag>
                    <el-tag
                      v-if="true"
                      size="mini"
                      effect="dark"
                      type="warning"
                      style="float: right; margin-top: 8px"
                      @click.stop="handleEditTag(tag, $event)"
                    >
                      修改
                    </el-tag>
                  </el-option>
                </el-select>

    handleDeleteTag (tag) {
      this.$confirm('其他训练任务中若有此标签也将被删除，确认删除此标签吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteTrainTaskTag(tag.id).then(() => {
          this.$message.success('删除成功')
          this.getTags()
        }).catch(() => {
          this.$message.error('删除失败')
        })
      })
    },

其中关键的是@click.stop，此方法可阻断点击事件的继续传播。否则点击删除按钮后会继续触发el-select的选中事件。

扩展

@click.prevent：阻止事件的默认行为

 比如在代码里写入一个a标签，点击后会跳转到目标链接网页中：

<div>
	<a href="https://www.baidu.com">百度</a>
</div>

 但是如果我们不想让它跳转并且还想使用a标签的话，此时就需要使用@click.prevent方法，此时点击后就不会跳转了。

<div>
	<a href="https://www.baidu.com" @click.prevent='notLink'>百度</a>
</div>