el-select下拉列表宽度

### 调整 Element UI `el-select` 下拉列表宽度

为了调整 `el-select` 组件下拉列表的宽度，可以采用多种方法来覆盖默认样式。由于Element UI框架中的组件样式具有较高的优先级，直接通过全局CSS可能无法生效。

#### 方法一：使用自定义类名并增加 CSS 特指度

可以在模板中给 `el-select` 添加一个特定的 class 名称：

<template>
  <div>
    <el-select v-model="value" class="custom-width">
      <!-- options -->
    </el-select>
  </div>
</template>

<style scoped>
/* 提高特异性 */
.el-select.custom-width .el-select-dropdown__item {
  padding-left: 20px;
}

/* 设置弹出层宽度 */
.el-popper.is-customized-popper {
  min-width: 300px !important; /* 自定义宽度 */
}
</style>

这种方法利用了更高的选择器权重来确保样式能够被应用到目标元素上[^1]。

#### 方法二：使用深嵌套作用域插槽 (Scoped Slot)

如果希望更精确地控制内部结构，则可以通过 slot-scope 来访问子组件的内容，并对其进行定制化处理：

<template>
  <el-select ref="selectRef" v-model="value">
    <el-option
      v-for="(item, index) in items"
      :key="index"
      :label="item.label"
      :value="item.value"
      slot-scope="{ item }"
    />
  </el-select>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'

const selectRef = ref(null);

onMounted(() => {
  nextTick(() => {
    const popperElm = document.querySelector('.el-select-dropdown');
    if(popperElm){
        popperElm.style.minWidth = "300px"; // 动态设置最小宽度
    }
  });
});
</script>

此方式允许动态操作 DOM 结构，在某些情况下更加灵活。

#### 方法三：借助 JavaScript 或 Vue 生命周期钩子函数

对于一些复杂的场景，还可以考虑在 mounted 阶段获取实际渲染后的节点并通过原生 JS 进行修改；或者监听窗口大小变化事件实时更新下拉菜单尺寸等高级技巧。

---