请问vue中el-select怎么阻止change事件

<el-select v-model= "searchcondition" :placeholder= "$t('sale.searchcondition')" clearable filterable @change= "handleSearch" >

<el-option

v- for = "item in searchconditions"

:key= "item.id"

:label= "item.name"

:value= "item.id"

>

<span style= "float: left" >{{ item.name }}</span>

<el-link style= "float: right; color: #8492a6; font-size: 10px" @click= "deleteSearch(item.id)" >删除</el-link>

</el-option>

</el-select>

点击删除会成功调用deleteSearch删掉对应的项,但是仍然会调用change事件handleSearch,请问在点击删除时怎么能阻止调用change事件handleSearch呢

阻止change事件其实就是阻止事件冒泡,在vue中阻止事件冒泡只需要将@click="function"改为@click.stop="function"即可,写了一个demo如下,实测可行。

<template>
  <el-select v-model="searchCondition" clearable filterable @change="handleSearch">
    <el-option
      v-for="item in searchConditions"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
      <span style="float: left">{{ item.name }}</span>
      <el-link style="float: right; color: #8492a6; font-size: 10px" @click.stop="deleteSearch(item.id)">删除</el-link>
    </el-option>
  </el-select>
</template>

<script>
  export default {
    name: "ElSelectTest",
    data: () => {
      return {
        searchCondition: 1,
        searchConditions: [
          {id: 1, name: 'item 1'},
          {id: 2, name: 'item 2'},
        ]
      }
    },
    methods: {
      handleSearch: function () {
        console.log('handle search')
      },
      deleteSearch: function (id) {
        console.log('delete', id)
        return false
      }
    }
  }
</script>

楼上说的对
:yum:

非常感谢,我的基础知识太差了:flushed: