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

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

無(wú)圖無(wú)真相，先上最終效果圖再說(shuō) 。

引入 iscroll

npm i iscroll --save 

對(duì)插件再做一層封裝，封裝成 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,  // 阻止瀏覽器滑動(dòng)默認(rèn)行為
    probeType: 3, //需要使用 iscroll-probe.js 才能生效 probeType ： 1 滾動(dòng)不繁忙的時(shí)候觸發(fā) probeType ： 2 滾動(dòng)時(shí)每隔一定時(shí)間觸發(fā) probeType ： 3   每滾動(dòng)一像素觸發(fā)一次
    mouseWheel: true, //是否監(jiān)聽(tīng)鼠標(biāo)滾輪事件。
    scrollX: true,  // 啟動(dòng)x軸滑動(dòng)
    scrollY: true,  // 啟動(dòng)y軸滑動(dòng)
    // momentum: false,
    lockDirection: false,
    snap: false, //自動(dòng)分割容器，用于制作走馬燈效果等。Options.snap:true// 根據(jù)容器尺寸自動(dòng)分割
    //snapSpeed: 400,
    scrollbars: false, //是否顯示默認(rèn)滾動(dòng)條
    freeScroll: true, //主要在上下左右滾動(dòng)都生效時(shí)使用，可以向任意方向滾動(dòng)。
    deceleration: 0.0001, //滾動(dòng)動(dòng)量減速越大越快，建議不大于 0.01,默認(rèn):0.0006
    disableMouse: true, //是否關(guān)閉鼠標(biāo)事件探測(cè)。如知道運(yùn)行在哪個(gè)平臺(tái)，可以開(kāi)啟它來(lái)加速。
    disablePointer: true, //是否關(guān)閉指針事件探測(cè)。如知道運(yùn)行在哪個(gè)平臺(tái)，可以開(kāi)啟它來(lái)加速。
    disableTouch: false, //是否關(guān)閉觸摸事件探測(cè)。如知道運(yùn)行在哪個(gè)平臺(tái)，可以開(kāi)啟它來(lái)加速。
    eventPassthrough: false, //使用 IScroll 的橫軸滾動(dòng)時(shí)，如想使用系統(tǒng)立軸滾動(dòng)并在橫軸上生效，請(qǐng)開(kāi)啟。
    bounce: false //是否啟用彈力動(dòng)畫(huà)效果，關(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è)置高度，不然向上滾動(dòng)失效
2.固定和行與列，即：rows、cross 的position要設(shè)為relative

最終效果就如上圖。

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

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

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

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

完整代碼如下：

最終效果圖如下：

不過(guò)這個(gè)版本的上下滾動(dòng)時(shí)的精準(zhǔn)計(jì)算有點(diǎn)誤差。

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

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

我會(huì)不定期更新有價(jià)值的內(nèi)容，長(zhǎng)期運(yùn)營(yíng)。

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