el-select 选中后抖动

### 解决 `el-select` 组件选中后抖动问题

当使用 Element Plus 的 `el-select` 组件时，可能会遇到选项被选中后的界面抖动现象。这种现象通常由以下几个原因引起：

#### 1. 高度变化引起的布局重绘
在某些情况下，选择项的高度可能发生变化，这会触发浏览器重新计算页面布局，从而导致视觉上的抖动效果[^2]。

/* 调整 tag 组件的默认高度 */
.el-tag {
    height: auto;
}

#### 2. 多选模式下的标签显示问题
对于多选模式的选择器，默认情况下每个已选项会被渲染成一个小标签（tag），这些标签的存在可能导致容器尺寸不稳定，进而引发抖动[^3]。

<template>
  <el-select v-model="value" multiple placeholder="请选择">
    <!-- ... -->
  </el-select>
</template>

<script setup>
import { ref } from 'vue';
const value = ref([]);
</script>

为了缓解这一情况，可以尝试调整 `.el-tag` 类的相关样式属性，使其不会因为内容长度的变化而影响父级元素的高度。

#### 3. 动画过渡配置不当
如果给定的选择器设置了动画效果，在切换状态时如果没有处理好时间轴或缓动函数，则可能出现不流畅的情况，表现为轻微的跳动或是闪烁[^4]。

// 移除不必要的 transition 效果
.el-select .el-input__inner,
.el-select-dropdown {
  transition: none !important;
}

通过上述方法之一或多者组合应用，应该能够有效减少甚至消除 `el-select` 组件在交互过程中的异常表现。当然具体实施还需视实际开发环境和个人需求灵活调整。