前：項目用到的技術(shù)棧為webpack+vue2.x+pug+stylus+elementUI
1、IE9中辖佣， 請求服務(wù)器數(shù)據(jù)并用v-for渲染option標(biāo)簽出現(xiàn)只顯示第一個字的問題
解決方法：
/**
* 強制重繪頁面的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自定義指令判斷時機問題
// 錯誤寫法
'null' (el) {
if (el.innerHTML === '' || el.innerHTML === '--') {
addClass(el, 'null-handler')
} else {
removeClass(el, 'null-handler')
}
},
因為無法控制標(biāo)簽內(nèi)容的渲染時機導(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手動獲取焦點問題
情景：輸入框一開始是隱藏的珊随，點擊按鈕顯示輸入框并獲取焦點
把手動獲取焦點那段代碼寫在$nextTick()就好了
手動獲取焦點這個操作我也記錄一下：
首先給標(biāo)簽加個屬性ref="searchBox"（名字隨便起）,然后點擊按鈕把控制顯示的字段賦值true，接著寫下這幾行代碼就好了
this.$nextTick(() => {
this.$refs.searchBox.focus()
})
5、mounted鉤子函數(shù)中請求數(shù)據(jù)導(dǎo)致頁面閃屏問題
其實就是加載時機問題叶洞，放在created里會比mounted觸發(fā)早一點鲫凶，如果在頁面掛載完之前請求完成的話就不會看到閃屏了
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屬性”
因為ie認(rèn)為NodeList是一個對象波丰，不支持forEach方法遍歷，解決方法很簡單
// es6寫法
let nodeList = [...this.$el.querySelectorAll('[id^=productItem]')]
// es5寫法
let nodeList = Array.prototype.slice.call(this.$el.querySelectorAll('[id^=productItem]'))
