vue el-select 事件

### Vue `el-select` 组件事件使用方法

#### 基础事件绑定

在 Vue 中，`el-select` 是 Element Plus 提供的选择器组件。为了监听并响应用户的交互行为，可以通过 v-on 指令来绑定各种事件处理器。

对于基本的选项改变事件，可以直接利用 change 事件：

<template>
  <div id="app">
    <el-select v-model="selectedValue" @change="handleChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const selectedValue = ref('');
const handleChange = (val) => {
  console.log(`Selected value changed to ${val}`);
};
const options = [
  { label: "Option1", value: "option1" },
  { label: "Option2", value: "option2" }
];
</script>

此代码展示了如何设置一个简单的下拉菜单，并为其添加了一个 change 事件监听器[^2]。

#### 处理清除选择的情况

当设置了 clearable 属性使用户能够清空当前选定项时，除了正常的 change 事件外还会触发额外的行为。为了避免不必要的错误或重复执行某些逻辑，可以在内部维护状态标志位或其他手段区分正常更改与清除动作[^3]。

<template>
  <div id="app">
    <el-select
      v-model="selectedValue"
      clearable
      placeholder="请选择"
      @clear="handleClear"
      @change="handleChange"
    >
      <!-- ... -->
    </el-select>
  </div>
</template>

<script setup>
// ...
const handleClear = () => {
  console.log('Selection cleared');
};

const handleChange = (newValue) => {
  if (!newValue && !isClearedByUser) {
    isClearedByUser = true;
    setTimeout(() => (isClearedByUser = false), 0);
  }

  // 正常处理业务逻辑...
}
let isClearedByUser = false;

</script>

这里引入了布尔类型的变量 `isClearedByUser` 来追踪是否是由用户主动发起的清除操作，从而有条件地跳过特定的变更处理流程。

#### 虚拟滚动多选支持

最新版本中的 TSelect 组件已经加入了对虚拟列表的支持以及更强大的多选能力。这意味着即使面对大量数据源也能保持良好的用户体验和性能表现。开发者可以根据实际需求灵活配置这些特性以满足不同的应用场景要求[^1]。