element-ui 中的table和bootstrap中的table的某些設置還是有一定的差別的。之前用bootstrap做的表格，想要實現簡短列和詳細列的切換。因為詳細列實在有太多列了，拉動滾動條還有一段距離。所以希望能夠切換到簡短列可以方便的看見比較重要的幾列的內容。用之前的方法<bootstrap>的話，非常簡單，直接設置display的顯示和隱藏就可以了。
但是放在element-ui中來就不可行了。每一列根本不能直接設置樣式，你給每一列設置class-name從而設置樣式的話，可能也許會存在一點問題。。因為每一列的class-name的樣式是包裹在cell樣式中的，比如說當你想要在class-name里面來設置width的話，外層容器cell沒變，里面的內容的width變了，那么內容就會覆蓋到后面一列的內容，並且把人家擠開，自己霸占位置。就會出現頁面混亂。。感覺好像扯遠了的樣子，，
回到顯示和隱藏上面來，在element-ui中的table中，控制某一列的隱藏和顯示，想到的是使用v-show，但是之前用過了不行，沒起作用。后面網上查了一下，發現使用v-if是可行的。至於為啥，我也說不上來。於是就有了這樣：
（階段一）
其他想要隱藏的列直接也加上v-if='show' 就好了。
這兩個方法是兩個簡短列和詳細列的按鈕的click事件，控制數據show的true還是false，
恩，到這里呢，第一階段的表格列的隱藏和顯示就成功了啦。接下來還有個問題是，假設某一列的內容實在太多了，而上面一階段的每個單元格是沒有設置寬度width的，這點需要記住了。於是每一個單元格的寬度都是一樣的。這內容超多的一列就顯得非常的長，看着實在是糟心。好吧，那就給他設置一個width吧，給這內容太多的一列設置了widht:'180'。
恩，有效果了，再試試切換功能。卡！出現了一個意想不到的問題。單元格的寬度居然變得超級大。滾動條也根本滾不到盡頭好吧。。這可是非常愁人。根本不知道為什么切換一下顯示和隱藏就帶來了這種"驚嚇"的效果。無奈還是慢慢的尋找解決的辦法。在不斷的嘗試當中，我發現如果單元格設置了寬度之后，當只有一列使用了v-if:"show"的時候，一切正常。如果有出現多列使用 v-if:"show" 就會出現問題。循着這條路去想。最終我覺得不是只能出現一個 v-if嗎？那就把需要隱藏的幾列全部用一個容器包裹起來。讓容器顯示和隱藏應該就可以了吧，如下：
恩，試試~~，沒錯，一切恢復正常了！可以使用這種方法。