vue + element table数据过多实现懒加载

  components: {
    CloseButton,
    Pagination,
    Tree,
    Dialog
  },
  directives: {
    loadmore: {
      bind (el, binding) {
        const selectWrap = el.querySelector('.el-table__body-wrapper')
        selectWrap.addEventListener('scroll', function () {
          const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
          // 判断是否到底,scrollTop为已滚动到元素上边界的像素数，scrollHeight为元素完整的高度，clientHeight为内容的可见宽度
          if (scrollDistance <= 10) {
            binding.value()
          }
        })
      }
    }
  },

el-table.standard-table.management-table(
                  :data="tableData.data"
                  height="100%"
                  :ref="tableData.tableRef"
                  @select="handleCheckboxSelect"
                  @row-click="handleRowSelect"
                  v-loadmore='loadmore'
                )

methods: {
    // table滚动到底部触发该事件 loadNum: 0
    loadmore () {
      this.loadNum++
      this.tableData.data = [...this.tableData.data, ...this.listEach(this.loadNum)]
    },
    // 每次显示6条数据，滚动到底部数据加6
    listEach (Num) {
      const NumStart = ((Num - 1) * 5) + 6
      const NumEnd = (Num * 5) + 6
      const tableDataEach = this.listArray.slice(NumStart, NumEnd)
      return tableDataEach
    } //listArray是table获取的所有数据
    // 点击左侧的树结构获取对应的数据
    async handleNodeClick (event, treeId, treeNode) {
      const idArr = []
      const idResArr = this.findNodeChildren(treeNode, idArr)
      const ids = idResArr.join(',')
      this.ids = ids
      const parmas = {
        id: '',
        name: '',
        ids: ids
      }
      const data = await getListQualityDefectReq(parmas)
      if (!data) return
      if (data.success) {
        this.listArray = data.data
        this.loadNum = 0
        this.tableData.data = this.listArray.slice(0, 6)
      }
    },
}

 参考： https://blog.csdn.net/qq_52912134/article/details/117958214

https://segmentfault.com/a/1190000018756141?utm_source=tag-newest