el-table滚动懒加载封装成vue指令及vue指令封装

逻辑封装

el-table滚动懒加载指令逻辑文件

export default {
    bind(el, binding) {
        let table_dom = el.querySelector(".el-table__body-wrapper");
        table_dom.addEventListener("scroll", function() {
            let condition =
                this.scrollHeight - this.scrollTop <= this.clientHeight;
            if (condition) {
                binding.value();
            }
        });
    }
}

在src/directive/index.js 指令文件index中引入逻辑文件

import elTableLazyloading from "./el-table-lazy-loading/el-table-lazyloading.js";
const install = function(Vue) {
    Vue.directive("el-table-lazyloading", elTableLazyloading);
};
export default install;

main.js文件引入指令

import directive from "./directive/index.js"; // directive
Vue.use(directive); //全局挂载

使用

<el-table
        v-el-table-lazyloading="lazyloading"
        v-loading="loading"
        height="100%"
        border
        :data="tableData"
        style="width: 100%; height: 100%; font-size: 13px"
      >
   methods: {
    async lazyloading() {
      this.queryParams.pageNo = this.queryParams.pageNo + 1;
      this.getList();
    }
   }