額，最近有點頻繁記錄。感覺遇到了很多的問題。然後不斷的查，不斷的嘗試修改。然後得到解決。還是記錄關於element-ui的使用。這次是關於表格的使用。

表格使用其實平時用的話也就那麽幾個屬性。雖然官網提供了好像還是蠻多的屬性和方法，但是一般情況下不是很復雜的表格的話，使用的屬性都是基本的。方法的也基本是。

這次遇到的問題整整折騰了快一天的時間。代碼使你興奮，同時，更多的是使你"瘋狂"。這個瘋狂更多時候指的是抓狂！

不廢話了，開始進入問題：

使用element-ui的表格時候表格內容的單一性很多時候不能滿足我們的需求。所以很多時候我們都要自定義表格的格式，恩，這個官網也有說到，

具體的用法就是在el-table-column中嵌套一個<template></template>

說到自定義的話，我還會想到fomatter，單元格內容的格式化，當然element-ui中也提供了這樣的屬性，在需要格式化的單元格添加fomatter屬性，在methods裏面去實現fomatter，

使用fomatter我感覺一般是這種情況：

比如說我的表格有一列狀態列，從後端得到的數據是（0或者1），也許代表者審核和未審核，或者其他意思，但是這個時候展示到表格中需要進行格式化，這個時候就可以使用到formatter屬性了：

這裏列舉實現方式:

formatterState(row,column,columnValue){

if(row.state==1){return ‘已審核‘;}

else{return ‘未審核‘；}

}

實現方法也是比較簡單。但是如果你的格式化內容包含了html片段的話，建議還是使用官網提供的模板嵌套的方法實現自定義內容，因為fomatter返回的值是string，同樣也會把html片段當做字符串輸出。導致不會解析。

自定義內容解決了。現在我要實現讓table和baguettebox.js 畫廊插件進行聯合使用。

就是說後端返回的數據中有照片，但是我要當點擊某一行的內容的時候，要查看某一行對應的照片，這裏使用的畫廊插件：baguttebox.js,根據上面的自定義表格內容就可以很容易得到如上圖的a超鏈接樣式，

現在只需要使用baguttebox.js的一段代碼就可以實現了？

恩，感覺差不多。試一下效果呢？.....無效。感覺沒有什麽不對的地方啊！！不停的改，沒錯。從昨天下午改到現在。。我勸自己不能angry！要淡定！

沒有效果？ 我把內容圖片提到table之外，恩！可以了，沒錯，這種情況下更加angry了，為什麽放在你element-ui中的table中就是不行呢！

最後去對比有效果的 a和沒有效果的a，發現了不同之處：

有效果的a的click事件是使用了畫廊插件的。而沒有效果的a的click事件根本就沒有。所以根本沒和插件搭上關系。

在這個組件中無法實現效果。就把自定義的內容提到子組件中試試。

子組件：

在含有table的父組件中來引用它，雖然看起來好像沒有區別。但是居然奏效了。a鏈接也不負眾望的加上了插件的click事件。點擊有效！

雖然不是太明白這個到底是個什麽意思，放在子組件中就實現了效果。但是總算是找到了解決辦法。有類似問題的童鞋也可以參考參考。或許就實現了你的效果呢

element-ui table