【element UI】el-select 组件下拉数据某一行文字过多时，文字换行展示，避免el-select下拉框被撑宽，导致页面过丑

目录

• 问题图
• 解决
• • 解决图
  • 解决代码

问题图

空白太多导致页面太丑

解决

解决图

解决代码

<el-select
  v-model="selectForm[label.code + '#' + item.code]"
  placeholder="请选择"
  multiple
  filterable
  collapse-tags
  popper-class="use-options-select-popper"
>
  <el-option
    v-for="(options, idx) in item.children"
    :key="'options' + idx"
    :style="{ '--selectMaxWidth': boxWidth }"
    :label="options.name"
    :value="options.code"
    class="use-options-select-option"
  >
    <span :style="{ '--selectMaxWidth': boxWidth }">
      {{ options.name }}
    </span>
  </el-option>
</el-select>

可以去掉 popper-class 类，此处 popper-class 也可以不写

/* 【注意】不能加 scoped 因为 popper直接挂在 body 上，加了 scoped 就不生效了 */
<style lang="scss">
.use-options-select-popper .use-options-select-option {
  white-space: revert-layer;
  max-width: var(--selectMaxWidth);
  height: unset;
  line-height: unset;
  padding: 8px 25px;
}
</style>