前言
本人並不是前端開發人員，不過前端的介面和互動也沒少寫。以下整理一下我在使用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>。