【vue】解决element-ui的el-select下拉框中因选项内容太长导致容器宽度过长问题

在使用Element UI的el-select下拉框组件时，如果下拉列表中的选项内容太长，可能会导致下拉框的宽度自动扩展以适应内容，看起来非常不优雅。为了解决这个问题，可以通过CSS来限制下拉框的最大宽度，同时通过设置popper-class属性来自定义下拉面板的样式。

以下是一个简单的示例，演示如何通过CSS来限制el-select下拉框的宽度：

<template>
  <el-select v-model="value" popper-class="select-dropdown">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      options: [
        { value: '1', label: '长长的选项1 - 这是一段很长的文本' },
        { value: '2', label: '长长的选项2 - 这是一段很长的文本' },
        // 更多选项...
      ]
    };
  }
};
</script>
 
<style>
/* 自定义下拉框的样式 */
.select-dropdown {
  max-width: 200px !important; /* 设置最大宽度 */
  width: fit-content !important; /* 设置宽度自适应内容 */
}
</style>

在上述代码中，.select-dropdown 类被应用到下拉框的popper元素上，通过设置max-width属性为200px，限制了下拉框的最大宽度。同时，width属性被设置为fit-content，以确保下拉框的宽度恰好足够包含内容而不会超出视觉界面的限制。

请注意，!important的使用是为了确保自定义的CSS样式优先级高于Element UI的默认样式。如果不想使用!important，可以通过提升选择器优先级或在全局样式表中加载自定义样式的方式来解决样式覆盖问题。