前提：最近專案打算將element從1.x升級到2.x，於是整理了一波常用的屬性之間的區別，不是十分全面。其中非相容性更新為升級中容易掉坑的地方，希望可以被當成快速查詢工具。
element-ui 1.x與2.x的對比
| 對比項 | element1.x | element2.x | 非相容性更新 |
|---|---|---|---|
| 依賴 | 最低相容Vue2.5.2和IE10 | ||
| 自定義主題 | element-theme，通過線上主題生成工具下載，再引入 | element-theme-chalk 使用scss變數，直接修改主題色，覆蓋原檔案 | 移除theme-default |
| 綜合 | 1、表單元件的 change 事件和 Pagination 的 current-change 事件現在僅響應使用者互動 2、為了方便使用第三方圖示，Button 的 icon 屬性、Input 的 prefix-icon 和 suffix-icon 屬性、Steps 的 icon 屬性現在需要傳入完整的圖示類名 3、Button 和表單元件的 size 屬性現在可接受 medium、small 和 mini |
||
| Autocomplete | 1、移除 custom-item 屬性。現在通過 scoped slot 自定義輸入建議列表項的內容 2、移除 props 屬性，現在使用 value-key 屬性指定輸入建議物件中用於顯示的鍵名 |
||
| layout佈局 | 新增基於斷點的隱藏類，import 'element-ui/lib/theme-chalk/display.css'; 通過新增相應類名，用於在某些條件下隱藏元素 |
||
| Container | X | 新增元件：使用flex佈局，需確定相容性。：外層容器、：頂欄容器、：側邊欄容器、：主要區域容器、：底欄容器。 | |
| color | 顏色值變化 | ||
| icon | 1、iconButton引用： 2、可以使用第三方圖示庫 |
iconButton引用： | |
| button | 新增round、circle屬性 | ||
| radio、checkbox | 1、新增border、size屬性。size依賴於border 2、radio-group可以設定禁用 |
||
| input | 1、新增 可清空clearble 屬性 2、新增prefix-icon、suffix-icon屬性，定義icon位置 3、新增tabindex：輸入框的tabindex |
1、移除 icon 屬性。現在通過 suffix-icon 屬性或者 suffix 具名 slot 來加入尾部圖示 2、移除 on-icon-click 屬性和 click 事件。現在如果需要為輸入框中的圖示新增點選事件，請以具名 slot 的方式新增圖示 3、change 事件現在僅在輸入框失去焦點或使用者按下回車時觸發，與原生 input 元素一致。如果需要實時響應使用者的輸入，可以使用 input 事件 |
|
| inputNumber | 1、新增controls-position：控制按鈕位置 2、新增foucs、blur事件 |
||
| select | 1、增加clearble：可清空 2、新增collapse-tags：多選時可將選中值按文字的形式展示 3、新增auto-complete 4、新增reserve-keyword：多選且可搜尋時，是否在選中一個選項後保留當前的搜尋關鍵詞 5、popper-append-to-body： 是否將彈出框插入至 body 元素 6、新增foucs、blur事件 |
||
| cascader | 1、新增separator：自定義分隔符 2、新增foucs、blur事件 |
||
| switch | on-color、off-color、on-text、off-text、on-value、off-value | active-color、inactive-color、active-text、inactive-text | 1、由於 on-x 屬性在 JSX 中會被識別為事件，導致 Switch 所有 on-x 屬性在 JSX 中無法正常工作，所以 on-x 屬性更名為 active-x，對應地，off-x 屬性更名為 inactive-x。受到影響的屬性有：on-icon-class、off-icon-class、on-text、off-text、on-color、off-color、on-value、off-value 2、active-text 和 inactive-text 屬性不再有預設值 |
| timePicker | 1、增加鍵盤事件，可用方向鍵導航，enter選中 2、新增is-range：是否時間範圍選擇 3、新增arrow-control：是否使用箭頭 4、新增range-separator：選擇範圍時的分隔符 5、自定義圖示：頭部圖示prefix-icon、清空圖示clear-icon |
||
| datePicker | 1、新增format：輸入框格式；value-format：繫結值格式 2、新增default-time：指定日期範圍的具體時間 3、自定義圖示：頭部圖示prefix-icon、清空圖示clear-icon |
change 事件引數現在為元件的繫結值，格式由 value-format 控制 | |
| DateTimePicker | 相關升級部分參照timePicker和datePicker | ||
| upload | 1、新增：before-remove：刪除前的鉤子 2、新增limit：最大允許上傳個數 3、on-exceed：檔案超出個數限制時的鉤子 |
||
| rate | text-template | 1、score-template 2、新增show-score，只讀時用，和show-text不能同時存在 |
text-template 屬性更名為 score-template |
| ColorPicker | 1、新增predefine：預定義顏色 2、新增size |
||
| transfer | footer-format | 1、format 2、新增target-order：右側列表元素的排序策略：若為 original，則保持與資料來源相同的順序；若為 push，則新加入的元素排在最後；若為 unshift，則新加入的元素排在最前 3、新增clearQuery方法，清空搜尋關鍵詞 |
footer-format 屬性更名為 format |
| form | 1、新增size、disabled 2、新增inline-message：行內形式展現校驗資訊 3、新增status-icon：在輸入框中顯示校驗結果反饋圖示 4、新增validate-on-rule-change：在 rules 屬性改變後立即觸發一次驗證 | ||
| table | 1、新增span-method：合併行或列 2、新增type=index，自定義索引 3、新增select-on-indeterminate：在多選表格中，當僅有部分行被選中時，點選表頭的多選框時的行為。若為 true，則選中所有行；若為 false，則取消選擇所有行 |
1、移除通過 inline-template 自定義列模板的功能 2、sort-method 現在和 Array.sort 保持一致的邏輯，要求返回一個數字 3、將 append slot 移至 tbody 元素以外，以保證其只被渲染一次 4、expand 事件更名為 expand-change，以保證 API 的命名一致性 5、row-class-name 和 row-style 的函式引數改為物件，以保證 API 的一致性 |
|
| tag | 1、新增size 2、新增disable-transitions：禁用漸變動畫 |
type 屬性現在支援 success、info、warning 和 danger 四個值 | |
| progress | 新增color：進度條背景色 | ||
| tree | current-node-key：當前選中節點的 key，只寫屬性 | 1、新增render-after-expand：是否在第一次展開某個樹節點後才渲染其子節點 2、lazy：懶載入子節點，配合load使用3、draggable：可拖拽；allow-drag：判斷節點能否被拖拽；allow-drop：拖拽時判定位置能否被放置 | |
| pagination | 預設有背景顏色 | 預設無背景顏色 | |
| alert | center設定居中 | ||
| loding | element-loading-spinner和element-loading-background屬性分別用來設定圖示類名和背景色值 | ||
| message、messageBox | 1、可以用center居中 2、可以使用html片段dangerouslyUseHTMLString 但是確保內容可信，要不容易導致XSS攻擊 |
||
| notification | 1、自定義位置position，引數top-right、top-left、bottom-right、bottom-left，預設為top-right 2、可以使用html片段dangerouslyUseHTMLString 但是確保內容可信，要不容易導致XSS攻擊 |
||
| navMenu | 通過theme屬性定製主題 | 1、 通過設定background-color、text-color、active-text-color自定義主題 2、可以設定disabled禁用 3、設定collapse-transition，開啟摺疊動畫 4、SubMenu可以設定對應屬性：popper-class自定義類名；show-timeout、hide-timeout展開、收起sub-menu延時；disabled禁用；popper-append-to-body將彈出選單插入至body |
移除 theme 屬性。現在通過 background-color、text-color 和 active-text-color 屬性進行顏色的自定義 |
| tabs | 可以通過 tab-position 設定標籤的位置 | ||
| breadCrumb | 可以通過separator-class設定自定義圖示 | ||
| dropDown | 1、可以通過size設定medium、small、mini來設定尺寸 2、placement設定選單彈出位置 |
menu-align 屬性變更為 placement，增加更多方位屬性 3、show-timeout 和 hide-timeout 屬性現在僅在 trigger 為 hover 時生效 |
|
| steps | 1、通過simple設定簡潔風格 2、通過align-center設定描述居中 |
1、移除 center 屬性 2、現在步驟條將預設充滿父容器 |
|
| dialog | 可以通過size設定大小 | 1、可以通過append-to-body設定巢狀dialog 2、center設定內容居中 |
1、移除 size 屬性。現在 Dialog 的尺寸由 width 和 fullscreen 控制 2、移除通過 v-model 控制 Dialog 顯示和隱藏的功能 |
| popover | 事件：after-enter、after-leave 顯示隱藏動畫結束後才觸發 |