摘要：固定的表格頭部與第一列的寬高行高都是通過獲取真實的表格的寬高來設定的。通過展示的表格的上下滾動從而帶動固定在第一列的向上滾動，向左右滾動帶動覆蓋上表頭的的左右滾動。

最近做移動端的h5項目，要做一個可配置表頭的復雜表格，網上找了很久也沒什么好方法，結合網上的一些例子，在此做一了一個完整的vue版的例子。

無圖無真相，先上最終效果圖再說 。

引入 iscroll

npm i iscroll --save 

對插件再做一層封裝，封裝成 iscrollTable.js 方便調用，代碼如下：

// 統一使用
const iScollProbe = require("iscroll/build/iscroll-probe");
let scroller = null;
let Selector = "";
export function createIScroller(selector) {
  Selector = selector;
  scroller = new iScollProbe(Selector, {
    preventDefault: false,  // 阻止瀏覽器滑動默認行為
    probeType: 3, //需要使用 iscroll-probe.js 才能生效 probeType ： 1 滾動不繁忙的時候觸發 probeType ： 2 滾動時每隔一定時間觸發 probeType ： 3   每滾動一像素觸發一次
    mouseWheel: true, //是否監聽鼠標滾輪事件。
    scrollX: true,  // 啟動x軸滑動
    scrollY: true,  // 啟動y軸滑動
    // momentum: false,
    lockDirection: false,
    snap: false, //自動分割容器，用于制作走馬燈效果等。Options.snap:true// 根據容器尺寸自動分割
    //snapSpeed: 400,
    scrollbars: false, //是否顯示默認滾動條
    freeScroll: true, //主要在上下左右滾動都生效時使用，可以向任意方向滾動。
    deceleration: 0.0001, //滾動動量減速越大越快，建議不大于 0.01,默認:0.0006
    disableMouse: true, //是否關閉鼠標事件探測。如知道運行在哪個平臺，可以開啟它來加速。
    disablePointer: true, //是否關閉指針事件探測。如知道運行在哪個平臺，可以開啟它來加速。
    disableTouch: false, //是否關閉觸摸事件探測。如知道運行在哪個平臺，可以開啟它來加速。
    eventPassthrough: false, //使用 IScroll 的橫軸滾動時，如想使用系統立軸滾動并在橫軸上生效，請開啟。
    bounce: false //是否啟用彈力動畫效果，關掉可以加速
  });
  scroller.on("scroll", updatePosition);
  scroller.on("scrollEnd", updatePosition);
  scroller.on("beforeScrollStart", function () {
    scroller.refresh();
  });

  function updatePosition() {
    let frozenCols = document.querySelectorAll(selector + " table tr td.cols");
    let frozenRows = document.querySelectorAll(selector + " table tr th.rows");
    let frozenCrosses = document.querySelectorAll(selector + " table tr th.cross");
    for (let i = 0; i < frozenCols.length; i++) {
      frozenCols[i].style.transform = "translate(" + -1 * this.x + "px, 0px) translateZ(0px)";
    }
    for (let i = 0; i < frozenRows.length; i++) {
      frozenRows[i].style.transform = "translate(0px, " + -1 * this.y + "px) translateZ(0px)";
    }
    for (let i = 0; i < frozenCrosses.length; i++) {
      frozenCrosses[i].style.transform = "translate(" + -1 * this.x + "px," + -1 * this.y + "px) translateZ(0px)";
    }
  }

  return scroller;
}

export function refreshScroller() {
  if (scroller === null) {
    console.error("先初始化scroller");
    return;
  }
  setTimeout(() => {
    scroller.refresh();
    scroller.scrollTo(0, 0);
    let frozenCols = document.querySelectorAll(Selector + " table tr td.cols");
    let frozenRows = document.querySelectorAll(Selector + " table tr th.rows");
    let frozenCrosses = document.querySelectorAll(Selector + " table tr th.cross");
    for (let i = 0; i < frozenCols.length; i++) {
      frozenCols[i].style.transform = "translate(0px, 0px) translateZ(0px)";
    }
    for (let i = 0; i < frozenRows.length; i++) {
      frozenRows[i].style.transform = "translate(0px, 0px) translateZ(0px)";
    }
    for (let i = 0; i < frozenCrosses.length; i++) {
      frozenCrosses[i].style.transform = "translate(0px, 0px) translateZ(0px)";
    }
  }, 0);
}

引用前面的自己封裝的iscrollTable.js，用到的table.vue的具體代碼如下：

注意點：
table 外的盒子 .rolling-table 要設置高度，不然向上滾動失效
2.固定和行與列，即：rows、cross 的position要設為relative

最終效果就如上圖。

因為除了表頭和第一列，其他都可以滾動所以需要：
1.一個展示的table表格
2.一個用來覆蓋上表頭的 thead，一個用來覆蓋左上角的 div，一個固定在第一列的 tbody。

展示的table表格放在最底層，覆蓋上表頭的 thead固定定位在最上面，固定在第一列的 tbody固定定位在最左邊，左上角的 div固定是左上角且z-index最大，在最上層。

固定的表格頭部與第一列的寬、高、行高都是通過獲取真實的表格的寬高來設定的。

通過展示的table表格的上下滾動從而帶動固定在第一列的 tbody向上滾動，向左右滾動帶動覆蓋上表頭的 thead的左右滾動。

完整代碼如下：

最終效果圖如下：

不過這個版本的上下滾動時的精準計算有點誤差。

希望文章內容對你有一點幫助！

對 全棧修煉 有興趣的朋友可以掃下方二維碼關注我的公眾號

我會不定期更新有價值的內容，長期運營。

關注公眾號并回復 福利 可領取免費學習資料，福利詳情請猛戳： Python、Java、Linux、Go、node、vue、react、javaScript