element-ui table

 

 

 

額，最近有點頻繁記錄。感受遇到了不少的問題。而後不斷的查，不斷的嘗試修改。而後獲得解決。仍是記錄關於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事件。點擊有效！

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