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

• 先看现象
  

省略号显示

<el-select
          v-model="configs.domain.secondLevel"
          style="width: 100%"
          filterable
          allow-create
          default-first-option
          placeholder="请输入二级网段名称，例如：广州研发中心/研发网"
          @focus="setOptionWidth"
        >
          <el-option
            v-for="item in secondDomainOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :style="{ width: selectOptionWidth }"
          ></el-option>
        </el-select>

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

滑动显示

<el-select
          v-model="configs.domain.secondLevel"
          style="width: 100%"
          filterable
          allow-create
          default-first-option
          placeholder="请输入二级网段名称，例如：广州研发中心/研发网"
          @focus="setOptionWidth"
          popper-class="my-select"
        >
          <el-option
            v-for="item in secondDomainOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :style="{ width: selectOptionWidth }"
          ></el-option>
        </el-select>

.my-select .el-select-dropdown__item {
  overflow: visible;
  display: block;
}