解決elementUI 切換tab后 el_table 固定列下方多了一條線問題
現(xiàn)象：
解決方法 ：
1.修改全局css
2.只修改局部css
.你的tableClass{
/deep/ .el-table__fixed {
height: 100% !important; //設置高優(yōu)先，以覆蓋內聯(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)先，以覆蓋內聯(lián)樣式
}
}
這樣就解決了這個問題。
以上這篇解決elementUI 切換tab后 el_table 固定列下方多了一條線問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue+element樹組件 實現(xiàn)樹懶加載的過程詳解
這篇文章主要介紹了vue+element樹組件 實現(xiàn)樹懶加載的過程，本文通過圖文實例代碼相結合給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
vue 實現(xiàn)強制類型轉換 數(shù)字類型轉為字符串
今天小編就為大家分享一篇vue 實現(xiàn)強制類型轉換 數(shù)字類型轉為字符串，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細介紹了Vue實現(xiàn)拖拽式分割布局，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue組件props不同數(shù)據類型傳參的默認值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
ResizeObserver?loop?limit?exceeded報錯原因及解決方案
這篇文章主要給大家介紹了關于ResizeObserver?loop?limit?exceeded報錯原因及解決的相關資料,公司項目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個高頻錯誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了分享一個vue項目“腳手架”項目的實現(xiàn)步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Monaco-editor,一個vs?code?編輯器,這篇文章主要為大家詳細介紹了如何在Vue2中使用Monaco?Editor,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
Vue使用vue-draggable 插件在不同列表之間拖拽功能
這篇文章主要介紹了使用vue-draggable 插件在不同列表之間拖拽,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
不同于vue2不需要被use使用,vue3的機制是你的指令必須要被注冊成方法的,這樣你才能全局使用到自定義指令,下面這篇文章主要給大家介紹了關于vue3自定義指令的相關資料,需要的朋友可以參考下2022-11-11
前端上傳文件很大時,會出現(xiàn)各種問題,比如連接超時了,網斷了,都會導致上傳失敗,這個時候就需要將文件切片上傳,下面我們就來學習一下如何使用vue實現(xiàn)大文件切片上傳吧2023-11-11