場景

有天邊上的同事問了我一個問題，示例如下，有個數據特別長，導致下拉部分被橫向撐大。希望在全局對所有的option進行處理，按照select的寬度，超出隱藏。

處理

方式一

第一眼看過去直接修改源碼好了，修改一下樣式，再配合patch-package做一個補丁包即可。

方式二

轉念一想，要么直接覆蓋原有的el-option組件唄。拷貝option.vue文件到本地，按要求修改完成后，將其注冊為全局組件，保持命名一致即可

方式三

添加一個鼠標事件監聽，手動添加title屬性（有一丟丟延遲）

document.addEventListener('mouseenter', e => {
  var event = e || window.event;
   var target = event.target || event.srcElement;
   if (target.className.indexOf('el-select-dropdown__item') > -1) {
     target.setAttribute("title", target.children[0].innerHTML);
   }
 }, true)

方式四

同事看了一眼說這幾種方法不夠優雅，有什么更高大上點的處理方式嗎？我想了一下，行吧，直接掏箱底。

從element-ui源碼上看，el-option綁定的是currentLabel，想要全局處理，那直接擴展一個功能吧

示例如下

import Vue from 'vue'
import ElementUI from 'element-ui';

Vue.component('el-option', {
  extends: ElementUI.Option,
  mounted(){
  	// 當option掛載時，設置一個title屬性
    this.$el.setAttribute('title',this.currentLabel)
  }
})

再加個樣式，看一下效果，完美解決