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