vue+elementui table组件实现滚动条分页懒加载的方法

1、滚动条懒加载实现分页数据获取

• 首先在文件夹directive下的directive.js文件夹中定义全局指令 如下：

'use strict';

/**
 *
 *
 * 添加所有的全局指令
 *
 *
 */

 import Vue from 'vue'

 // 聚焦指令
 // 注册一个全局自定义指令 `v-focus`
 // v-focus
 Vue.directive('focus', {
   // 当被绑定的元素插入到 DOM 中时……
   inserted: function (el) {
     // 聚焦元素
     el.focus();
   }
 })

• 第一步 定义懒加载的全局指令

Vue.directive('loadmore', { //懒加载
  bind(el, binding) {
    const selectWrap = el.querySelector('.el-table__body-wrapper')
    selectWrap.addEventListener('scroll', function () {
      let sign = 100
      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
      if (scrollDistance <= sign) {
        binding.value()
      }
    })
  }
})

// v-dialogDragWidth: 弹窗宽度拖大 拖小
 Vue.directive('dialogDragWidth', {
   bind(el, binding, vnode, oldVnode) {
     const dragDom = binding.value.$el.querySelector('.el-dialog');

     el.onmousedown = (e) => {
       // 鼠标按下，计算当前元素距离可视区的距离
       const disX = e.clientX - el.offsetLeft;

       document.onmousemove = function(e) {
         e.preventDefault(); // 移动时禁用默认事件

         // 通过事件委托，计算移动的距离
         const l = e.clientX - disX;
         dragDom.style.width = `${l}px`;
       }

       document.onmouseup = function(e) {
         document.onmousemove = null;
         document.onmouseup = null;
       }
     }
   }
 })

//弹出框可拖拽
 //v-dialogDrag
 Vue.directive('dialogDrag', {
   bind(el, binding, vnode, oldVnode) {
     const dialogHeaderEl = el.querySelector('.el-dialog__header');
     const dragDom = el.querySelector('.el-dialog');
     dialogHeaderEl.style.cursor = 'move';

     // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
     const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

     dialogHeaderEl.onmousedown = (e) => {
       // 鼠标按下，计算当前元素距离可视区的距离
       let oevent = e || window.event;
       const disX = oevent.clientX - dialogHeaderEl.offsetLeft;
       const disY = oevent.clientY - dialogHeaderEl.offsetTop;

       // 获取到的值带px 正则匹配替换
       let styL=0, styT=0;

       // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
       if (sty.left.includes('%')) {
         styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
         styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
       } else {
         styL = sty.left!='auto'?(+sty.left.replace(/\px/g, '')):(dialogHeaderEl.offsetLeft);
         styT = sty.top!='auto'?(+sty.top.replace(/\px/g, '')):(dialogHeaderEl.offsetTop);
       }

       document.onmousemove = function(e) {
         // 通过事件委托，计算移动的距离
         let oevent = e || window.event;
         const l = oevent.clientX - disX;
         const t = oevent.clientY - disY;

         // 移动当前元素
         dragDom.style.left = `${l + styL}px`;
         dragDom.style.top = `${t + styT}px`;

         // 将此时的位置传出去
         // binding.value({x:e.pageX,y:e.pageY})
       }

       document.onmouseup = function(e) {
         document.onmousemove = null;
         document.onmouseup = null;
       }
     }
   }
 })

• 第二步 在el-table中使用指令定义方法、并且在data中定义所需变量

<el-table 
    :default-sort="{prop: 'date', order: 'descending'}" 
    size='small' 
    ref="multipleTable"
    :data="tableData" 
     v-loadmore="loadMore"
     v-loading="loadingBox"
    tooltip-effect="dark" 
    :row-class-name="tableRowClassName"
    style="width:100%"
    height="90%"  
     @selection-change="handleSelectionChange">

• 第三步 根据所给的接口地址以及需要传进接口的参数进行第一页数据的获取

showlist() { //管理列表查询
        var th = this;
        let jsonR = {
            roleName: this.roleName, //供应商角色
            keyWord: this.keyWord,
            page:0,
            pageSize:20,
            // orderBy: '',
            // orderType: '',
            bBuyer:'10'
          }
          if ( JSON.parse(localStorage.getItem('userInfo')).datas.data.platformType != 'Z') 
          jsonR.frspId  = JSON.parse(localStorage.getItem('userInfo')).datas.data.tspId ;
        this.$http({
          method: 'get',
          data: jsonR,
          url: '/api' + this.$api.partner.addressList,
          success: function (res) {
            th.tableData = res.datas.data;
            th.loadSign = true;
            th.loadingBox = false; 
            th.totalPage = parseInt(res.datas.total/20) ;
          }
        })
      },

• 第四步 调用loadMore懒加载分页数据的方法

loadMore(){                
        let that=this;
        if (this.loadSign) {
         this.loadSign = false
         this.loadingBox=false
         this.page++
         if (this.page > this.totalPage) {
         return
         }
         setTimeout(() => {
             that.loadSign = true;
             that.loadingBox=true;               
              let jsonR = {
                  roleName: that.roleName, //供应商角色
                  keyWord: that.keyWord,
                  page:this.page,
                  pageSize:20,
                  // orderBy: '',
                  // orderType: '',
                  bBuyer:'10'
                }
                if ( JSON.parse(localStorage.getItem('userInfo')).datas.data.platformType != 'Z') 
                jsonR.frspId  = JSON.parse(localStorage.getItem('userInfo')).datas.data.tspId ;
              this.$http({
                method: 'get',
                data: jsonR,
                url: '/api' + this.$api.partner.userSearch,
                success: function (res) {
                  that.tableData = that.tableData.concat(res.datas);                    
                },
               error:(res)=>{
                   console.log('error:',res);
               }
              })               
         }, 500)
         console.log('到底了', this.page)
        }
      },

• 梳理好自己的代码 就可以实现分页加载的功能了，如果后台没有返回总页数或者总条数的话，注意需要后台返回一下！！
• 予人玫瑰，手留余香~