前言

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