element-ui 中的table的列隱藏問題

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嗎？那就把須要隱藏的幾列所有用一個容器包裹起來。讓容器顯示和隱藏應該就能夠了吧，以下：

恩，試試~~，沒錯，一切恢復正常了！可使用這種方法。