前：項(xiàng)目用到的技術(shù)棧為webpack+vue2.x+pug+stylus+elementUI

1、IE9中， 請求服務(wù)器數(shù)據(jù)并用v-for渲染option標(biāo)簽出現(xiàn)只顯示第一個字的問題

解決方法：

/**
 * 強(qiáng)制重繪頁面的select 輸入框，解決IE9只顯示單個字符串問題
 * @param useNextTick {Boolean} 使用在vm next tick 處理， 默認(rèn)true
 */
forceRedrawSelect: function (useNextTick) {
    useNextTick = useNextTick !== false;
    if (!browser.isIE)
        return;
    var _this = this;
    var redraw = function () {
        var $select = _this.$("select");
        $select.css('width', 0);
        $select.css('width', '');  // remove from style tag
    };
    if(useNextTick)
        this.$nextTick(redraw);
    else
        redraw()
},

2、IE9中，elementUI的el-input刪除操作無法觸發(fā)數(shù)據(jù)變動監(jiān)聽

解決辦法：加入ie9input事件墊片
cnpm install --save ie9-oninput-polyfill

3、vue自定義指令判斷時機(jī)問題

// 錯誤寫法
'null' (el) {
    if (el.innerHTML === '' || el.innerHTML === '--') {
      addClass(el, 'null-handler')
    } else {
      removeClass(el, 'null-handler')
    }
  },

因?yàn)闊o法控制標(biāo)簽內(nèi)容的渲染時機(jī)導(dǎo)致判斷出錯，所以應(yīng)該去判斷value

// 正確寫法
'null' (el, { value, oldValue }) {
  if (oldValue === value) return
  if (value === '' || value === '--') {
    addClass(el, 'null-handler')
  } else {
    removeClass(el, 'null-handler')
  }
},

4、el-input手動獲取焦點(diǎn)問題

情景：輸入框一開始是隱藏的，點(diǎn)擊按鈕顯示輸入框并獲取焦點(diǎn)
把手動獲取焦點(diǎn)那段代碼寫在$nextTick()就好了
手動獲取焦點(diǎn)這個操作我也記錄一下：
首先給標(biāo)簽加個屬性ref="searchBox"（名字隨便起）,然后點(diǎn)擊按鈕把控制顯示的字段賦值true，接著寫下這幾行代碼就好了

this.$nextTick(() => {
  this.$refs.searchBox.focus()
 })

image.png

image.png

5、mounted鉤子函數(shù)中請求數(shù)據(jù)導(dǎo)致頁面閃屏問題

其實(shí)就是加載時機(jī)問題，放在created里會比mounted觸發(fā)早一點(diǎn)，如果在頁面掛載完之前請求完成的話就不會看到閃屏了

6、IE9中template標(biāo)簽使用問題

之前在tr標(biāo)簽里面用template標(biāo)簽包裹td標(biāo)簽，出現(xiàn)了比較嚴(yán)重的UI錯亂，
所以。。IE9不能在tr標(biāo)簽中使用template標(biāo)簽

7、純色svg轉(zhuǎn)換成字體（用了panda這個軟件），跟預(yù)期不符

這個應(yīng)該是跟svg的描繪路徑什么的有關(guān)，讓設(shè)計師同學(xué)重新出一個圖吧。。

8、一個奇葩bug，開發(fā)環(huán)境elementUI的表格排序圖標(biāo)不顯示，但是在線上環(huán)境和其他同事的開發(fā)環(huán)境沒問題

// 是由于mac沒安裝xcode導(dǎo)致依賴包install出錯（出錯了居然還能啟動。。）
// 輸入以下命令，如果沒安裝xcode系統(tǒng)就會提示你安裝了
// npm rebuild node-sass --force
后來又出現(xiàn)了問題， 然后我升級了npm版本解決

9、el-table用v-if隱藏顯示列和預(yù)期不符問題

給el-table-column加一個key屬性，:key="Math.random()"或者其他的，確保每列的key值不同就可以了

10、在使用el-table的時候有的時候需要對表格中的數(shù)據(jù)做處理，需要用到filter，雖然官方也有提供過濾的方法（filter-method），但是還是用自定義列，然后用filter復(fù)用性好一些

<el-table-column label="日期">
  <template slot-scope="scope">
    <span>{{scope.row.date | dateConvert}}</span>
  </template>
</el-table-column>

11、在使用el-table的時候，有時候需要自定義表頭，比如在表頭中加個問號，然后hover有個提示信息

這里就需要用到官方提供的render-header屬性了，首先給需要自定義表頭的列加一個屬性，綁定一個方法
HTML中

<el-table-column label="日期",  :render-header="renderDate">
  <template slot-scope="scope">
    <span>{{scope.row.date | dateConvert}}</span>
  </template>
</el-table-column>

methods中

renderDate (createElement, { column }) {
  return createElement('div', {style: {'margin-top': '5px'}}, [
    column.label,
    createElement(
       'el-tooltip',
        {
          class: 'header-tip',
          props: {
            effect: 'light',
            placement: 'bottom-end',
            enterable: false,
            content: '日期'
          }
        }, [
          createElement('i', {
            class: 'el-icon-question'
          })
        ]
    )
  ])
}

12、用forEach遍歷NodeList，ie報錯“nodelist為對象，不支持forEach屬性”

因?yàn)閕e認(rèn)為NodeList是一個對象，不支持forEach方法遍歷，解決方法很簡單

// es6寫法
let nodeList = [...this.$el.querySelectorAll('[id^=productItem]')]
// es5寫法
let nodeList = Array.prototype.slice.call(this.$el.querySelectorAll('[id^=productItem]'))