element Table表格组件渲染不分页数据滚动加载不分页数据

方法一：

一、定义需要用到的变量 

data() {
  return {
    count: 19, // 默认展示条数
    tableData: [], // 表格数据
    allData: [] // 所有数据
  }
}

二、在进页面或打开弹窗时获取列表数据的地方处理成需要展示的数据

// 所有数据
this.allData = response.rows
// 初始值为19
this.needle = 19
this.tableData = []
//判断数据长度有没有20个，有就先添加20个，没有直接获取所有数据
if(this.allData.length > 19){
  for(let i = 0; i < 20; i++){
    this.tableData[i] = this.allData[i]
  }
} else {
    this.tableData = this.allData
}

 三、定义滚动加载函数 

lazyLoading(){
  // 获取table的body元素
  let dom = document.getElementById('table').querySelector('.el-table__body-wrapper')
  // console.log('dom', dom)
  // 添加对滚动条的监听
  dom.addEventListener('scroll', () => {
    const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight
    // console.log('鼠标滑动-scrollDistance', scrollDistance)
    if (scrollDistance <= 0 || scrollDistance <= 1) {
      let index = 0
      // 避免添加undefined数据导致表渲染报错
      if (this.needle === this.allData.length) {
        this.needle = 0
      }
      for (let i = this.needle; i < this.needle + 5; i++) {
        if (this.tableData[i]) {
          this.tableData[i] = this.allData[i]   
          this.$set(this.tableData, i, this.allData[i])
          this.$forceUpdate()
          index = i
        }
      }
      this.needle = index + 1
    }
  })
}

四、在mounted中设置监听鼠标滚动事件  

mounted() {
  this.lazyLoading()
},

方法二： 

element Table组件实现懒加载

（1）在项目 utils 文件夹下新建自定义指令文件 directives.js

import Vue from 'vue';
import { Message } from 'element-ui';

let oList = [], nList = [], dom, noMore = false, loading = false, isFirstUpdate = true // 原数组，表格渲染数组，dom节点

function LoadMore() {
  loading = true // 触底加载中
    if (oList.length <= 0 && !noMore) {
      noMore = true
      Message({
        type: 'warning',
        message: '数据已全部加载完毕',
        duration: 3000
      })
      loading = false
      return
    }  // 如果默认数据为0，return
    let list = []
    if (oList.length > 10) {
      list = oList.splice(0, 10)
    } else {
      list = oList.splice(0, oList.length)
    }
    for (let i = 0;i < list.length;i++) {
      nList.push(list[i])
    }
    loading = false
}
// 滚动事件
function handleScroll() {
  // 表格滚动条滚动的距离
  let scrollTop = dom.scrollTop
  // 变量windowHeight是可视区的⾼度
  let windowHeight = dom.clientHeight
  // 变量scrollHeight是滚动条的总⾼度
  let scrollHeight = dom.scrollHeight
  console.log('scrollTop---start')
  console.log(loading)
  console.log(scrollTop + windowHeight + 1)
  console.log(scrollHeight)
  if (scrollTop + windowHeight + 1 >= scrollHeight && !loading) {   // 这里就是滚动条滚动到底部的时候触发
    LoadMore()
  }
}

// 表格懒加载
Vue.directive('lazyLoad', {
  inserted: function(el, binding, vnode) {
    dom = vnode.componentInstance.bodyWrapper
    console.log(666)
  },
  update: function(el, binding, vnode){
    if(binding.value.oList && binding.value.nList) {
      oList = binding.value.oList
      nList = binding.value.nList
      console.log(777)
      console.log(oList)
      console.log(nList)
      if(nList.length <= 0) {
        LoadMore()
      }
      if(isFirstUpdate) {
        isFirstUpdate = false
        window.addEventListener('scroll', handleScroll, true)
      }
    }
  },
  unbind: function(el, binding, vnode) {
    console.log(999)
    oList = []
    nList = []
    noMore = false
    loading = false
    isFirstUpdate = true
    window.removeEventListener('scroll', handleScroll, true)
  }
});

（2）在main.js文件引入

import './utils/directives';

（3）在Table组件标签加上这个 v-lazyLoad 属性 

v-lazyLoad="{'oList': defaultData.firstItemList, 'nList': modalForm.firstItemList}"

以下仅供参考 

data() {
  return {
    modalForm: new Form(),
    defaultData: {},
  }
},
methods: {
  /** 查询demo数据 */
  openModal() {
    this.loading = true
    getQmsIpqcTFirstStandardInfo(this.command.data.id).then(res => {
    if (res.data.firstItemList && res.data.firstItemList.length > 0 &&  res.data.firstItemList.length > 10) {
      this.defaultData = JSON.parse(JSON.stringify(res.data))
      let tableList = this.defaultData.firstItemList.splice(0, 10)
      res.data.firstItemList = tableList
     }
      this.loading = false
      this.modalForm = Object.assign(new Form(), res.data)
    })
  }
}