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

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

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

（階段一）

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

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

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

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

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

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

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

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

最新評論