解決elementUI 切換tab后 el_table 固定列下方多了一條線問題
現(xiàn)象:
解決方法 :
1.修改全局css
2.只修改局部css
.你的tableClass{ /deep/ .el-table__fixed { height: 100% !important; //設(shè)置高優(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ā)代碼中,給該列設(shè)置任何class或style是無法添加在固定列這個DOM元素上的。從這個DOM元素可以看到style元素設(shè)置了width和height,這個元素是ElementUI生成表格時,生成的DOM元素,且設(shè)置了寬高。
從Chrome檢查元素,修改height為100%時,可以看見固定列顯示不全的問題就已解決。
所以,解決方案就放在設(shè)置這個固定列的height上了。
從DOM樹上看到,table組件還有哈希值的。(vue的每個組件有一個對應(yīng)的哈希值),而固定列上是沒有哈希值的,所以固定列是不在我們編碼的單個組件上的,而是把table看作一個子組件,而固定列就在table這個子組件上,直接通過class選擇器修改子組件的css樣式是沒用的,要通過\deep\修飾。
最后,通過給table設(shè)置calss:table-fixed
再通過css選擇器進行樣式穿透
.table-fixed { /deep/ .el-table__fixed-right { height: 100% !important; //設(shè)置高優(yōu)先,以覆蓋內(nèi)聯(lián)樣式 } }
這樣就解決了這個問題。
以上這篇解決elementUI 切換tab后 el_table 固定列下方多了一條線問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- elementui?el-table底層背景色修改簡單方法
- 關(guān)于ElementUI el-table 鼠標滾動失靈的問題及解決辦法
- Vue+EleMentUI實現(xiàn)el-table-colum表格select下拉框可編輯功能實例
- elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法
- 使用elementUI table展開行內(nèi)嵌套table問題
- Vue?ElementUI在el-table中使用el-popover問題
- elementUI的table表格改變數(shù)據(jù)不更新問題解決
- elementui的table根據(jù)是否符合需求合并列的實現(xiàn)代碼
相關(guān)文章
vue+element樹組件 實現(xiàn)樹懶加載的過程詳解
這篇文章主要介紹了vue+element樹組件 實現(xiàn)樹懶加載的過程,本文通過圖文實例代碼相結(jié)合給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10vue 實現(xiàn)強制類型轉(zhuǎn)換 數(shù)字類型轉(zhuǎn)為字符串
今天小編就為大家分享一篇vue 實現(xiàn)強制類型轉(zhuǎn)換 數(shù)字類型轉(zhuǎn)為字符串,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue組件props不同數(shù)據(jù)類型傳參的默認值問題
這篇文章主要介紹了vue組件props不同數(shù)據(jù)類型傳參的默認值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07ResizeObserver?loop?limit?exceeded報錯原因及解決方案
這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報錯原因及解決的相關(guān)資料,公司項目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個高頻錯誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下2023-09-09Vue使用vue-draggable 插件在不同列表之間拖拽功能
這篇文章主要介紹了使用vue-draggable 插件在不同列表之間拖拽,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03