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

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

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

現(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)固定列顯示不全的問題

在使用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的，所有在開發(fā)代碼中，給該列設(shè)置任何class或style是無(wú)法添加在固定列這個(gè)DOM元素上的。從這個(gè)DOM元素可以看到style元素設(shè)置了width和height，這個(gè)元素是ElementUI生成表格時(shí)，生成的DOM元素，且設(shè)置了寬高。

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

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

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

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

vue+element樹組件實(shí)現(xiàn)樹懶加載的過程詳解
這篇文章主要介紹了vue+element樹組件實(shí)現(xiàn)樹懶加載的過程，本文通過圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-10-10
vue 實(shí)現(xiàn)強(qiáng)制類型轉(zhuǎn)換數(shù)字類型轉(zhuǎn)為字符串
今天小編就為大家分享一篇vue 實(shí)現(xiàn)強(qiáng)制類型轉(zhuǎn)換數(shù)字類型轉(zhuǎn)為字符串，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue實(shí)現(xiàn)拖拽式分割布局
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)拖拽式分割布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue組件props不同數(shù)據(jù)類型傳參的默認(rèn)值問題
這篇文章主要介紹了vue組件props不同數(shù)據(jù)類型傳參的默認(rèn)值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
ResizeObserver?loop?limit?exceeded報(bào)錯(cuò)原因及解決方案
這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報(bào)錯(cuò)原因及解決的相關(guān)資料,公司項(xiàng)目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個(gè)高頻錯(cuò)誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下
2023-09-09
分享一個(gè)vue項(xiàng)目“腳手架”項(xiàng)目的實(shí)現(xiàn)步驟
這篇文章主要介紹了分享一個(gè)vue項(xiàng)目“腳手架”項(xiàng)目的實(shí)現(xiàn)步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-05-05
Vue2中使用Monaco?Editor的教程詳解
Monaco-editor,一個(gè)vs?code?編輯器,這篇文章主要為大家詳細(xì)介紹了如何在Vue2中使用Monaco?Editor,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01
Vue使用vue-draggable 插件在不同列表之間拖拽功能
這篇文章主要介紹了使用vue-draggable 插件在不同列表之間拖拽,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-03-03
vue3自定義指令看完這篇就入門了
不同于vue2不需要被use使用,vue3的機(jī)制是你的指令必須要被注冊(cè)成方法的,這樣你才能全局使用到自定義指令,下面這篇文章主要給大家介紹了關(guān)于vue3自定義指令的相關(guān)資料,需要的朋友可以參考下
2022-11-11
vue實(shí)現(xiàn)大文件切片上傳的示例詳解
前端上傳文件很大時(shí),會(huì)出現(xiàn)各種問題,比如連接超時(shí)了,網(wǎng)斷了,都會(huì)導(dǎo)致上傳失敗,這個(gè)時(shí)候就需要將文件切片上傳,下面我們就來學(xué)習(xí)一下如何使用vue實(shí)現(xiàn)大文件切片上傳吧
2023-11-11