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

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

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

現(xiàn)象：

解決方法：

1.修改全局css

2.只修改局部css

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

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

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

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

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

從Chrome檢查元素，修改height為100%時(shí)，可以看見(jiàn)固定列顯示不全的問(wèn)題就已解決。

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

從DOM樹(shù)上看到，table組件還有哈希值的。（vue的每個(gè)組件有一個(gè)對(duì)應(yīng)的哈希值），而固定列上是沒(méi)有哈希值的，所以固定列是不在我們編碼的單個(gè)組件上的，而是把table看作一個(gè)子組件，而固定列就在table這個(gè)子組件上，直接通過(guò)class選擇器修改子組件的css樣式是沒(méi)用的，要通過(guò)\deep\修飾。

最后，通過(guò)給table設(shè)置calss：table-fixed

再通過(guò)css選擇器進(jìn)行樣式穿透

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

這樣就解決了這個(gè)問(wèn)題。

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

您可能感興趣的文章:

相關(guān)文章

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