interface IScrollOption {
  distance: number; // 觸發(fā)loadData事件的滾軸距底部的距離
  loadData: () => void; // 數(shù)據(jù)加載函數(shù)
}
/**
 * 處理容器滾動事件 ; 滾動到底部時,執(zhí)行處理函數(shù)
 * @param dom
 * @param option
 */
function handleScroll(dom: Element, option: IScrollOption) {
  //
  const scrollBottom = dom.scrollTop + dom.clientHeight;
  if (dom.scrollHeight - scrollBottom <= option.distance) {
    // 數(shù)據(jù)加載
    option.loadData();
  }
}

<el-select v-model="selectData">
? <el-option v-for="item in data" :key="item.id" value="item.id" :label="item.name"></el-option>
</el-select>

/**
 * 定義懶加載數(shù)據(jù)列表的指令
 * 可通過滾動懶加載來減少一次性渲染大量數(shù)據(jù)的性能卡頓
 */
import Vue from "vue";
import { throttle } from "lodash";
export interface ILazyProps {
  loadData: () => void; // 數(shù)據(jù)加載函數(shù)
  distance: number; // 觸發(fā)函數(shù)調(diào)用的滾動距離
  scrollBody?: string; // 置頂滾動容器 , 不指定則為指令綁定元素
  callback: (fn: () => void) => void; // 自定義回調(diào)邏輯,可用于適時銷毀監(jiān)聽事件
}
Vue.directive("lazy-load", {
  /**
   * el - 指令所綁定的元素DOM
   * binding - 傳入指令的其他附帶參數(shù)
   *    name - 指令名
   *    value  - 指令綁定的值
   *    oldValue - 綁定的前一個值
   *    expression - 指令綁定的字符串形式的表達(dá)式
   *    arg - 傳給指令的參數(shù)
   *    modifiers - 指令修飾符的對象
   * vnode
   * oldVnode
   */
  inserted: (el, binding) => {
    // 獲取scroll 滾動的容器元素,由參數(shù)傳入
    // 如果沒有傳入,則默認(rèn)綁定指令的元素自己
    // 獲取懶加載處理函數(shù) , 以及其他參數(shù)
    const { loadData, distance, scrollBody, callback } =
      binding.value as ILazyProps;
    let scrollContainer = el;
    if (scrollBody) {
      scrollContainer = el.querySelector(scrollBody) || el;
    }
    // 滾動事件監(jiān)聽
    const scroll = throttle(
      handleScroll.bind(null, scrollContainer, { distance, loadData }),
      500
    );
    scrollContainer.addEventListener("scroll", scroll);
    // 回調(diào)時 返回事件銷毀函數(shù)
    callback(() => {
      scrollContainer.removeEventListener("scroll", scroll);
    });
  },
});

<el-select v-model="selectData" v-lazy-load="lazyOption">
? <el-option v-for="item in data" :key="item.id" value="item.id" :label="item.name"></el-option>
</el-select>

import { ILazyProps } from "@/directives/lazyLoad";
export default class extends Vue {
  lazyOption: ILazyProps = {
    loadData: this.loadData,
    distance: 20,
    scrollBody: ".el-scrollbar__wrap", // 為el-select 滾動容器的DOM元素的class選擇器
    callback: (fn: () => void) => {
    	// 這里是在組件銷毀前, 移除監(jiān)聽事件.
      this.$once("hook:beforeDestroy", () => fn());
    },
  };
	loadData(): void {
    this.data = this.data.concat(
      new Array(5).fill({
        id: "1009",
        name: "雙十一",
      })
    );
  }
}

<div v-infinite-scroll="loadData" infinite-scroll-disabled="disabled" infinite-scroll-delay="delay">
    <table
      :showPagination="false"
      :tableOption="tableOption"
      :tableColumns="tableColumns"
    ></table>
</div>

export default {
  name: 'InfiniteScroll',
  inserted(el, binding, vnode) {
    // 綁定的回調(diào)函數(shù)
    const cb = binding.value;
		// 當(dāng)前組件實例引用
    const vm = vnode.context;
    // only include vertical scroll
    // 滾動容器DOM元素
    const container = getScrollContainer(el, true);
    // 獲取指令需要的參數(shù) delay distance immediate disabled 
    const { delay, immediate } = getScrollOptions(el, vm);
    // 滾動事件處理函數(shù),節(jié)流
    const onScroll = throttle(delay, handleScroll.bind(el, cb));
		// 將額外的計算屬性綁定到el上,在unbind 可用于移除監(jiān)聽函數(shù)
    el[scope] = { el, vm, container, onScroll };
    if (container) {
      container.addEventListener('scroll', onScroll);
      if (immediate) {
        // 容器內(nèi)元素發(fā)生節(jié)點變更時觸發(fā)執(zhí)行
        // MutationObserver API 功能調(diào)用
        const observer = el[scope].observer = new MutationObserver(onScroll);
        observer.observe(container, { childList: true, subtree: true });
        // 初始調(diào)用一次滾動加載函數(shù)
        onScroll();
      }
    }
  },
  unbind(el) {
    // 移除滾動事件
    const { container, onScroll } = el[scope];
    if (container) {
      container.removeEventListener('scroll', onScroll);
    }
  }
};