el-select设置clearable属性触发事件

在Element UI库中的`el-select`组件中，`clearable`属性用于表示是否允许用户清除选中的值。当你设置了`clearable`为`true`时，通常会关联一个`clear`事件。当用户点击选择框旁边的“X”图标或者按下回车键清空已选选项时，这个事件会被触发。

默认的`clear`事件名称是`clear`，它的回调函数会在清除选中项时执行。例如：

<el-select v-model="selectedValue" clearable @clear="handleClear">
  <!-- 选项列表 -->
</el-select>

<script>
export default {
  methods: {
    handleClear() {
      console.log('已选值已清除');
      // 在这里可以更新状态或做其他操作
    }
  }
}
</script>

在这个例子中，`handleClear`函数会在选中的值被清除后被调用。如果你想自定义这个事件名或者处理方式，可以在`@`后面跟自定义的事件名称，并传递相应的处理函数作为参数。

相关问题

<el-select placeholder="请选择活动区域" clearable filterable v-model.lazy="company_id"> <el-option v-for="goods in Contractlist" :key="goods.company_id" :label="goods.company_name" :value="goods.company_id"></el-option> </el-select>选中触发事件

您可以使用`@change`事件来监听`el-select`选项的变化，然后在触发事件后执行您希望执行的代码。示例代码如下：

<el-select placeholder="请选择活动区域" clearable filterable v-model.lazy="company_id" @change="handleChange">
    <el-option v-for="goods in Contractlist" :key="goods.company_id" :label="goods.company_name" :value="goods.company_id"></el-option>
</el-select>

然后在您的Vue实例中，定义`handleChange`方法来处理选中事件：

methods: {
    handleChange() {
        // 在这里执行您希望执行的代码
    }
}

<el-select clearable filterable v-model.lazy="scope.row.goods_id" v-el-select-loadmore="loadMore" @filter-change="selectFilter" :popper-append-to-body="false" @visible-change="selectVisible"> <el-option v-for="goods in merchandiseNameData_.slice(0, range)" :key="goods.data" :label="goods.num" :value="goods.data"> </el-option> </el-select>为什么需要点击一次才展示数据

这段代码是使用了 Element UI 的 el-select 组件，并且使用了 lazy 模式的 v-model 双向绑定，同时也使用了 filterable 过滤器和 clearable 可清空选项。在这段代码中，需要点击一次才展示数据的原因可能是因为 loadMore 方法还没有被触发来加载数据。loadMore 方法是一个自定义方法，它会在 select 组件被打开时自动触发。如果这个方法没有被正确地实现，那么就需要手动点击一下才能展示数据了。另外，也有可能是因为数据量过大，加载需要一定的时间，因此需要等待一段时间才能展示数据。