本文地址: 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~~~≥ω≤