前言
本人並不是前端開發人員，不過前端的界面和交互也沒少寫。以下整理一下我在使用elementUI過程中遇到的問題和對應的解決方案。
正文
1.表格字段過長省略
elmentUI的table-column有提供屬性 show-overflow-tooltip 只要在對應的字段上設置為true，則文本超出部分就會用省略號替代，並且鼠標移至其上時，可查看完整信息。
2.如何獲取行數據作為方法參數？
如果要為表格的每一行都添加操作按鈕，如刪除。這些刪除按鈕綁定的是同一個方法，那么如何區分是誰調用的呢，答案就是在方法中傳入參數，而這些參數就是在渲染的時候寫死在@click的方法參數里面。獲取本行數據的方法就是scope.row.xxx，其中xxx就是本行數據的某一個屬性。如：@click="delete(scope.row.id)
3.<el-dropdown-item>如何綁定事件？
發現<el-dropdown-item>指定@click是沒有響應的。官方的使用方法是，在command屬性指定操作命令，然后在<el-menu>里面制定用於處理command的操作方法，例如@command="handleCommand"，然后在里面類似做switch的操作，即根據不同的值來進行對應的操作。還有就是command可以直接就是方法名，然后在handleCommand方法里面，這樣調用：this[command]()。這樣就是直接調用methods方法集中的對應方法。
但是，如果方法需要傳遞參數呢，用這種方法就不好做了。總不能再在這個command字符串中去把方法名和參數分別解析出來吧，那太麻煩了。解決方法就是@click.native="func"，這種方式可以直接調用methods方法集中的對應方法，傳參自然就沒問題了。
4.如何通過代碼關閉message提示？
一般我拋出提示信息，是直接this.$message。但是存在這樣的情境，即我完成了一個操作后，這個提示應該被立即關閉，而不是等它超時消失。答案就是，this.$message實際上會返回message對象的引用，那么我們定義一個變量來存這個引用，然后在需要的使用調用close方法即可。如 messageHandle = this.$message(...) messageHandle.close()
5.如何動態修改下拉框的可選項？
有些時候，當前下拉框的選項取決於前一個下拉框的選中項，這時候就需要動態變動可選項。其中下來框的可選項<el-option>一般都是通過v-for渲染的。如<el-option v-for="item in items" ....>。那么動態修改可選項的話，直接修改要遍歷的數組就可以了，即修改items數組的內容就可以了。另外如果當前下拉選項由上一個下來框的選中值決定，那么上一個下來框就可以在@change方法里面進行這個操作。
6.formatter的使用
有些時候表格數據的展示，不能直接用從后台獲取到的數據，需要進行一定的修改，或者說格式化。那么這個時候，就需要用到formatter。formatter有三個參數，依次是row,column,cellValue。
row是一行數據，可以通過這個參數獲取到其他列的信息。
column由於沒有相關的文檔，不太了解，應該就是列的信息。只知道column.property獲取到的就是這個列的key。
cellValue是當前單元格根據key從row中獲取到的值。如果沒有任何處理，單元格顯示的就是這個值。注意了，有些時候，key對應的value可能不是值，而是對象。那這時候界面是無法直接打印對象的，界面顯示就會是undefined。例如Mongo文檔的toJson字符串返回的是這樣的：(_id和long類型的變量返回的不是直接的值)
{
“_id”:{"$oid":"嘰嘰歪歪"},
"field1":"xxxx",
"field2":{"$numberLong":"12345"},
"field3":123
}
formatter方法是，針對列的。一列下來共用的是同一個方法。
7.表格不能顯示bool值的BUG
這是elementUI的bug，單元格什么都不顯示。官方說是不推薦直接顯示布爾值，說是沒什么意義。那么只能格式化了，但是如果你不想轉換成什么“YES/NO”,"通過/未通過”，而是直接打印ture/false的話。那就是把bool值轉成字符串返回就可以了。就是利用前面的formatter。return String(cellValue);
------------------2019年1月4日補充------------------------------------------------------
8.el-select下拉選項把v-for中的item作為value，無法再次選中?
如果直接把v-for="item in items"中的item作為value，則選中一次后，下拉選項就不能在改了。頁面顯示的是所有選項都是選中狀態。個人認為應該是select無法比較對象之間的不同，解決方法是在<el-select>中添加屬性value-key，指明用item中的哪個字段作為key，例如：item有個字段叫id，那就可以這樣寫<el-select value-key="id" ...>。這樣就可以把item作為選項的value了。而且選中后也不會有錯。
9.數據綁定帶來的問題
對一行數據進行編輯，一般是把這一行數據獲取到，然后復制給對話框綁定字段，然后在對話框內修改保存。但是，可能出現這種情況，即操作人修改了內容，但是沒有保存而是取消了。由於對象的賦值是引用賦值，修改的就是這一行的綁定數據。這就帶來問題了，即我明明沒有保存，怎么表格那行數據卻變了，這會給用戶帶來困惑。有一種方法是把這行的每個字段逐個復制給對話框綁定對象，這樣比較麻煩，另一種就是深度拷貝，簡單的做法就是JSON.parse(JSON.stringify(xxx))。這樣解析出來的就是一個全新的對象。
10.如何引入第三方圖標庫
ElementUI的圖標實在是太少了，完全不夠用。想要引入第三方圖標的話，首推Iconfont。主要是其搜索和打包方便。做法就是，進入阿里圖標庫，搜索想要的圖標保存，然后建一個項目（其實就是一個文件夾），全部放在里面。最后再統一下載。由於現在大部分前端項目都是vue-cli腳手架搭建的，所以下載后的壓縮包的內容，直接解壓到asset/font目錄下即可。使用的話，基類css icon-font + 圖標對應樣式。例如 <i class="iconfont icon-xxx"></i>。