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

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

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

引入 iscroll

npm i iscroll --save 

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

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

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

最終效果就如上圖。

因?yàn)槌吮眍^和第一列，其他都可以滾動所以需要：
1.一個展示的table表格
2.一個用來覆蓋上表頭的 thead，一個用來覆蓋左上角的 div，一個固定在第一列的 tbody。

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

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

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

完整代碼如下：

最終效果圖如下：

不過這個版本的上下滾動時的精準(zhǔn)計(jì)算有點(diǎn)誤差。

希望文章內(nèi)容對你有一點(diǎn)幫助！

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

我會不定期更新有價值的內(nèi)容，長期運(yùn)營。

關(guān)注公眾號并回復(fù) 福利 可領(lǐng)取免費(fèi)學(xué)習(xí)資料，福利詳情請猛戳： Python、Java、Linux、Go、node、vue、react、javaScript