場(chǎng)景

有天邊上的同事問(wèn)了我一個(gè)問(wèn)題，示例如下，有個(gè)數(shù)據(jù)特別長(zhǎng)，導(dǎo)致下拉部分被橫向撐大。希望在全局對(duì)所有的option進(jìn)行處理，按照select的寬度，超出隱藏。

處理

方式一

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

方式二

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

方式三

添加一個(gè)鼠標(biāo)事件監(jiān)聽(tīng)，手動(dòng)添加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)

方式四

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

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

示例如下

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

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

再加個(gè)樣式，看一下效果，完美解決