ElementUI Table 首行固定


本文地址: https://www.cnblogs.com/veinyin/p/12101047.html

 

需求描述:首行固定,吸附在表頭下,數據多時其他行可以縱向滾動

 

方案一  兩個表格拼湊

第一個表格展示頭部和固定行 第二個表格展示其它數據 示意圖如下

 

優點:固定行數沒有限制

缺點:適用場景,僅橫向 縱向均無滾動條時可用

若有橫向滾動條,兩個表格的滾動條是分開的,會出現滾動A  B不動,或滾動B A不動的情況,Windows下會展示兩個橫向滾動條,不美觀 

若有縱向滾動條,在Windows下滾動條是默認有寬度的,滾動條的寬占用了表格B的部分寬度,導致表頭和表主體列錯位,示意圖如下

 

 

 

方案二 修改表格樣式 將合並行上移

ElementUI 的 Table 有合並行這個功能,合並行位於 footer 中,固定在表格底部,即使 body 有橫向或縱向滾動,樣式和功能都已經優化好了。示意圖如下

 

 

 


要做的就是把樣式調整成我們想要的,使用定位把 footer 放到 header 下,body 向下移一行的距離即可。

 

補充:圖中為官方定義合並行內容的方法,如果單元格內展示的內容或樣式比較復雜,可以 return 元素,類似 JSX 寫法

 

優點:如有滾動不用過多關注樣式和功能問題

缺點:只能固定一行

 

總結:

方案一 兩個表格都無數據時的效果、兩個表格的拼接處邊框樣式要處理。

方案二 表格如果為流體高度,要判斷表格高度是內容撐開還是已經達到最大高,同時要監聽窗口縮放事件靈活定位

 

 

 

 END~~~≥ω≤


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM