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

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

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

（階段一）

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

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

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

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

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

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

<el-table-column :show-overflow-tooltip="true">
</el-table-column>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論