element-ui 中的table和bootstrap中的table的某些設(shè)置還是有一定的差別的。之前用bootstrap做的表格，想要實(shí)現(xiàn)簡(jiǎn)短列和詳細(xì)列的切換。因?yàn)樵敿?xì)列實(shí)在有太多列了，拉動(dòng)滾動(dòng)條還有一段距離。所以希望能夠切換到簡(jiǎn)短列可以方便的看見比較重要的幾列的內(nèi)容。用之前的方法的話，非常簡(jiǎn)單，直接設(shè)置display的顯示和隱藏就可以了。

康馬網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),康馬網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為康馬上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的康馬做網(wǎng)站的公司定做！

但是放在element-ui中來就不可行了。每一列根本不能直接設(shè)置樣式，你給每一列設(shè)置class-name從而設(shè)置樣式的話，可能也許會(huì)存在一點(diǎn)問題。。因?yàn)槊恳涣械腸lass-name的樣式是包裹在cell樣式中的，比如說當(dāng)你想要在class-name里面來設(shè)置width的話，外層容器cell沒變，里面的內(nèi)容的width變了，那么內(nèi)容就會(huì)覆蓋到后面一列的內(nèi)容，并且把人家擠開，自己霸占位置。就會(huì)出現(xiàn)頁(yè)面混亂。。感覺好像扯遠(yuǎn)了的樣子，，

回到顯示和隱藏上面來，在element-ui中的table中，控制某一列的隱藏和顯示，想到的是使用v-show，但是之前用過了不行，沒起作用。后面網(wǎng)上查了一下，發(fā)現(xiàn)使用v-if是可行的。至于為啥，我也說不上來。于是就有了這樣：

（階段一）

其他想要隱藏的列直接也加上v-if='show' 就好了。

這兩個(gè)方法是兩個(gè)簡(jiǎn)短列和詳細(xì)列的按鈕的click事件，控制數(shù)據(jù)show的true還是false，

恩，到這里呢，第一階段的表格列的隱藏和顯示就成功了啦。接下來還有個(gè)問題是，假設(shè)某一列的內(nèi)容實(shí)在太多了，而上面一階段的每個(gè)單元格是沒有設(shè)置寬度width的，這點(diǎn)需要記住了。于是每一個(gè)單元格的寬度都是一樣的。這內(nèi)容超多的一列就顯得非常的長(zhǎng)，看著實(shí)在是糟心。好吧，那就給他設(shè)置一個(gè)width吧，給這內(nèi)容太多的一列設(shè)置了widht:'180'。

恩，有效果了，再試試切換功能?？?！出現(xiàn)了一個(gè)意想不到的問題。單元格的寬度居然變得超級(jí)大。滾動(dòng)條也根本滾不到盡頭好吧。。這可是非常愁人。根本不知道為什么切換一下顯示和隱藏就帶來了這種"驚嚇"的效果。無奈還是慢慢的尋找解決的辦法。在不斷的嘗試當(dāng)中，我發(fā)現(xiàn)如果單元格設(shè)置了寬度之后，當(dāng)只有一列使用了v-if:"show"的時(shí)候，一切正常。如果有出現(xiàn)多列使用 v-if:"show" 就會(huì)出現(xiàn)問題。循著這條路去想。最終我覺得不是只能出現(xiàn)一個(gè) v-if嗎？那就把需要隱藏的幾列全部用一個(gè)容器包裹起來。讓容器顯示和隱藏應(yīng)該就可以了吧，如下：

恩，試試~~，沒錯(cuò)，一切恢復(fù)正常了！可以使用這種方法。

PS：element-ui的table列超出部分省略加懸浮提示

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。