解決elementUI 切換tab后 el_table 固定列下方多了一條線問題

更新時間：2020年07月19日 15:12:49 作者：qq_37749055

這篇文章主要介紹了解決elementUI 切換tab后 el_table 固定列下方多了一條線問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

現(xiàn)象：

解決方法：

1.修改全局css

2.只修改局部css

.你的tableClass{
  /deep/ .el-table__fixed {
  height: 100% !important; //設置高優(yōu)先，以覆蓋內(nèi)聯(lián)樣式
    }
   }

補充知識：解決ElementUI的Table組件固定列，在屏幕剛好夠表格顯示時，會出現(xiàn)固定列顯示不全的問題

在使用ElementUI的Table組件中的固定列時，發(fā)現(xiàn)當表格剛好顯示全，處于臨界值狀態(tài)時，固定列的高度(height)會于表格高度不一致，導致固定列顯示不全，出現(xiàn)垂直滾動條。

如上圖所示，現(xiàn)在表格下方是未出現(xiàn)水平滾動條的，處于表格寬度剛好夠顯示所有字段的臨界值，固定列出現(xiàn)了高度變小的情況，導致顯示不全。

上圖為檢查元素找到的固定列的DOM元素，固定列的DOM元素是獨立于表格body的，所有在開發(fā)代碼中，給該列設置任何class或style是無法添加在固定列這個DOM元素上的。從這個DOM元素可以看到style元素設置了width和height，這個元素是ElementUI生成表格時，生成的DOM元素，且設置了寬高。

從Chrome檢查元素，修改height為100%時，可以看見固定列顯示不全的問題就已解決。

所以，解決方案就放在設置這個固定列的height上了。

從DOM樹上看到，table組件還有哈希值的。（vue的每個組件有一個對應的哈希值），而固定列上是沒有哈希值的，所以固定列是不在我們編碼的單個組件上的，而是把table看作一個子組件，而固定列就在table這個子組件上，直接通過class選擇器修改子組件的css樣式是沒用的，要通過\deep\修飾。

最后，通過給table設置calss：table-fixed

再通過css選擇器進行樣式穿透

.table-fixed {
 /deep/ .el-table__fixed-right {
 height: 100% !important; //設置高優(yōu)先，以覆蓋內(nèi)聯(lián)樣式
 }
}

這樣就解決了這個問題。

以上這篇解決elementUI 切換tab后 el_table 固定列下方多了一條線問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue基于mint-ui的城市選擇3級聯(lián)動的示例
本篇文章主要介紹了vue基于mint-ui的城市選擇3級聯(lián)動的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
Vue中使用Element的Table組件實現(xiàn)嵌套表格
本文主要介紹了Vue中使用Element的Table組件實現(xiàn)嵌套表格,通過type="expand"設置了一個展開按鈕,點擊該按鈕會顯示與當前行關聯(lián)的子表格內(nèi)容,感興趣的可以了解一下
2024-01-01
vue如何使用vant組件的field組件disabled修改默認樣式
這篇文章主要介紹了vue如何使用vant組件的field組件disabled修改默認樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue之定義全局工具類問題
這篇文章主要介紹了Vue之定義全局工具類問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動現(xiàn)象(示例代碼)
在Vue中循環(huán)生成表格數(shù)據(jù)時,可能會遇到數(shù)據(jù)聯(lián)動的現(xiàn)象,即修改一個表格中的數(shù)據(jù)后,其他表格的數(shù)據(jù)也會跟著變化,這種現(xiàn)象通常是因為所有表格的數(shù)據(jù)引用了同一個對象或數(shù)組導致的,本文介紹vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動現(xiàn)象,感興趣的朋友一起看看吧
2024-11-11
Vue3中使用富文本編輯器的示例詳解
有不少的前端需求都需要使用到富文本編輯器,所以這篇文章主要來和大家介紹一下如何在Vue3項目中使用富文本編輯器,感興趣的可以了解下
2024-04-04
Vue點擊在彈窗外部實現(xiàn)一鍵關閉的示例代碼
在Vue應用中,彈窗是一個常見的交互元素,有時我們可能希望用戶點擊彈窗外部時,彈窗能夠自動關閉,本文主要介紹了Vue點擊在彈窗外部實現(xiàn)一鍵關閉的示例代碼,感興趣的可以了解一下
2024-06-06
Vue 使用 Mint UI 實現(xiàn)左滑刪除效果CellSwipe
這篇文章主要介紹了Vue 使用 Mint UI 實現(xiàn)左滑刪除效果CellSwipe,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2018-04-04
快速解決vue在ios端下點擊響應延時的問題
今天小編就為大家分享一篇快速解決vue在ios端下點擊響應延時的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Element基于el-input數(shù)字范圍輸入框的實現(xiàn)
本文主要介紹了?Element基于el-input數(shù)字范圍輸入框的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04