el-select 选项文字超长解决方案

一、横向滚动条解决

 要点： 1、popper-class="my-select"  设置自定义class

             2、样式不加 scoped, 设置 display: block;

<el-select v-model="value" popper-class="my-select" style="width: 100%" @focus="setOptionWidth">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    :style="{width: selectOptionWidth, 'min-width': '350px'}"
  >
  </el-option>
</el-select>


setOptionWidth(event) {
// 下拉框弹出时，设置弹框的宽度
  this.$nextTick(() => {
    this.selectOptionWidth = event.srcElement.offsetWidth + 'px'
  })
}

<style>
.my-select .el-select-dropdown__item {
  overflow: visible;
  display: block;
}
</style>

二、超长省略号显示，鼠标悬浮显示全部

 要点： 1、popper-class="my-select"  设置自定义class

             2、:popper-append-to-body="false" 将 el-select 选项的内容移动 div#app 当中

<el-select v-model="value" :popper-append-to-body="false" popper-class="my-select">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    :title="item.label"
  >
  </el-option>
</el-select>

<style>
.my-select .el-select-dropdown__item {
  width: 300px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>