【element-plus使用】el-select自定义样式、下拉框选项过长等问题解决

<template>
  <el-select
    v-model="selected"
    placeholder="请选择"
    class="custom-select"
    popper-class="custom-select-popper"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      class="custom-option"
    >
      <span class="custom-option-label">{{ item.label }}</span>
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '长文本长文本长文本长文本长文本', value: '1' },
        { label: '短文本', value: '2' }
      ]
    };
  }
};
</script>
 
<style scoped>
.custom-select {
  width: 200px;
}
 
.custom-select-popper {
  max-width: 400px; /* 设置下拉框的最大宽度 */
  overflow: auto; /* 选项过长时可滚动查看 */
}
 
.custom-option {
  text-align: left; /* 选项文本左对齐 */
}
 
.custom-option-label {
  text-overflow: ellipsis; /* 超长文本显示为省略号 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  max-width: 100%; /* 选项的最大宽度 */
}
</style>

这个代码示例展示了如何为el-select组件设置自定义样式，并为下拉框的选项过长的情况提供了解决方案。通过设置popper-class属性，可以为下拉框的popper（即下拉菜单的容器）添加自定义的CSS类，然后通过CSS样式规则控制宽度、滚动以及文本的显示。