各位，來談談用element-ui遇到的bug吧？

每一次升級，不僅是對新框架的考驗，更是對舊代碼和程序員的考驗。 —— 魯迅

瀉藥。

看熱鬧不嫌事情大呀～現在Github上還有10多頁issue呢。

最近升級了幾個CMS的element-ui版本（1.0 -&> 2.0），趁著有人問記錄一下～

版本更新

每次版本更新的版本號分為x、y、z。

• x的更新意味著不兼容更新，需要放棄舊的內容，可能導致API的不兼容。
• y的更新一般是添加新功能，不兼容的很少。
• z的更新一般只是修復BUG

因此，在接受x級更新時要慎重行事。

樣式錯誤

一般都是舊版本下開發者的LESS變數不適用新版本的樣式大小。

比如這個 Button 中文字不居中問題，是由 Button 的高導致的：

--large {
height: $btn-height-lg;
font-size: $btn-font-size-lg;
}
--small {
height: $btn-height-sm;
font-size: $btn-font-size-defau< } --mini { height: $btn-height-mi; font-size: $btn-font-size-defau< }

修改你的 height 全局變數就可以了。

介面運行錯誤

在版本更新後，有些API調用會發生變化。Element 3.0 的參數比 2.0 更加對象化。

比如這個 table 的樣式問題：

tableRowClassName (row, index) {
...
}


發現樣式不見了，其實是介面改變了：

tableRowClassName ({row, rowIndex: index}) {
...
// 代碼無需改動
}


還有的地方去除了較少使用的參數。

比如這個 select 框選擇無效的問題：

handleCheckedCitiesChange(event) {
console.log(event.target.checked)
}


原因也是介面的改變：

handleCheckedCitiesChange(checked) {
console.log(checked)
}


渲染模式優化

有些時候，維護者為了提高渲染效率，也會進行渲染模式的優化。這種優化引發的BUG就只能採用一些 hack 的方式解決了。

比如在一些情況下表格列不會更新或者更新錯誤，我們可以通過這種方式解決：

& ... &
...
this.rerenderTable = false
this.$nextTick(() =&> {
this.rerenderTable = true
})


這其實是由於 Element 在 mounted 時改變了 fixed 列註冊監聽邏輯導致的。

結束

反正運行只有一種, Bug 各有各的 Bug 咯～該踩的坑還是會踩的，吼吼吼～

以上。

發布了2.0可是沒有遷移指南!

項目原來就是用1.0做的，前兩天升級成2.0，除了 scope=「scope」改成了slot-scope=「scope」以外別的沒有什麼大問題，項目一樣能跑起來