1. 程式人生 > ># 實現二維表格行頭和列頭固定的解決方案

# 實現二維表格行頭和列頭固定的解決方案

在業務中,常常會遇到二維表格固定首行和首列的需求。這裡來探討試驗一下,二維表格固定行和列的幾種解決方案。作為自我學習和記錄成果的過程。
專案程式碼github地址

第一種:position sticky的解決方案

  1. css佈局
  • 上下佈局,下方內容區固定高度,內容y軸方向超出出現滾動條,即簡單的就實現了首行固定。(但是內容x軸方向內容超出,左邊列還沒固定)
  • 利用position新屬性,sticky left: 0; top: 0;,內容x軸方向內容超出出現滾動條,實現左邊首列固定。(但是,上方首行未能隨著x軸方向滾動條滾動)
  • 監聽x軸方向的滾動事件,取得event.scrollLeft值,及時同步給上方首行內容區transform: translateX(${scrollLeft}px)
    ,實現首行同時滾動效果。(此時已實現首行首列固定)
  • 多行多列固定,與首行首列固定方案同理即可,自行腦補。
  1. 資料渲染
  • 後端給的資料可以是這樣的結構:1. 行頭列表:物件陣列(有唯一id屬性)。 2. 列頭列表:物件陣列(有唯一id屬性)。 內容區:物件陣列(同時有行頭列頭陣列項唯一id,相當於x軸y軸座標),與之匹配。

文字描述,生澀。見demo:src/components/demo-pos-sticky.vue 資料模擬:src/components/mock.js

第二種:position absolute的解決方案

後續補充。。。。