項(xiàng)目上使用 el-table 加載1000 條數(shù)據(jù)，同時(shí)有三個(gè)列的數(shù)據(jù)需要實(shí)時(shí)更新，而數(shù)據(jù)更新時(shí)會(huì)導(dǎo)致頁(yè)面不響應(yīng)，表現(xiàn)為拖動(dòng)過(guò)程中突然卡頓。為了解決卡頓問(wèn)題提出了兩個(gè)解決辦法：一個(gè)是滾動(dòng)時(shí)清除定時(shí)器，不再刷新表格，滾動(dòng)結(jié)束后恢復(fù)定時(shí)器；另一個(gè)是只刷新視口數(shù)據(jù)，更新的數(shù)據(jù)量少了，自然不會(huì)卡頓。后者通過(guò)前者監(jiān)聽表格滾動(dòng)，實(shí)時(shí)更新縱向滾動(dòng)位移，再結(jié)合行高計(jì)算偏移量即可。下面主要講述如何監(jiān)聽表格滾動(dòng)。

網(wǎng)上可以搜到 element 的表格滾動(dòng)監(jiān)聽方法，試過(guò)之后發(fā)現(xiàn)不適用于 element plus，經(jīng)過(guò)翻閱源碼后找見了以下方法：

const tableRef = ref<InstanceType<typeof ElTable>>();
var timer: NodeJS.Timeout;
var scrollEndTimer: NodeJS.Timeout;
var tableScrollTop = 0;

const callback = () => {
  timer = setInterval(queryData, 3000);
};

onMounted(() => {
  // 開始滾動(dòng)后清除定時(shí)器，滾動(dòng)結(jié)束后啟動(dòng)定時(shí)器
  const scrollBarRef: any = tableRef.value!.$refs.scrollBarRef;
  const wrapRef = scrollBarRef.wrapRef;
  // onscrollend 事件只在較新的瀏覽器中支持，詳見 MDN
  if ("onscrollend" in window) {
    wrapRef.addEventListener("scroll", (event: any) => {
      clearInterval(timer);
      tableScrollTop = event.target.scrollTop;
    });
    wrapRef.addEventListener("scrollend", callback);
  } else {
    wrapRef.addEventListener("scroll", () => {
      clearInterval(timer);
      clearTimeout(scrollEndTimer);
      scrollEndTimer = setTimeout(callback, 100);
    });
  }

  callback();
});

// 進(jìn)入頁(yè)面時(shí)啟動(dòng)定時(shí)器
onActivated(() => {
  if (timer) {
    clearInterval(timer);
  }
  callback();
});

// 離開頁(yè)面時(shí)銷毀定時(shí)器
onDeactivated(() => {
  clearInterval(timer);
});

以下是部分源碼：

從圖 1 可以看到，table body 是包裹在 el-scrollbar 中的，圖 2 中可以看到 el-scrollbar 的內(nèi)容部分可以通過(guò) wrapRef 獲取到，基于此就可以添加滾動(dòng)監(jiān)聽了。

參考文章：超實(shí)用的全新JavaScript事件Scrollend實(shí)例詳解文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-736042.html

到了這里，關(guān)于element plus el-table 添加滾動(dòng)監(jiān)聽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！