elementUI table滚动分页

一、 el - table上设置ref属性ref = “table”

 <el-table :data="workforceTemDataCurrect"
              border
              v-loading="tableLoading"
              style="width: 100%"
              height="100%"
              ref="table">
               </el-table>

二、 因为操作dom所以用到生命周期钩子mounted

mounted() {
    // 获取需要绑定的table
    this.dom = this.$refs.table.bodyWrapper
    this.dom.addEventListener('scroll', () => {
      // 表格滚动条滚动的距离
          let scrollTop = this.dom.scrollTop
          // 变量windowHeight是可视区的⾼度
          // let windowHeight = this.dom.clientHeight
          // 变量scrollHeight是滚动条的总⾼度
          let scrollHeight = this.dom.scrollHeight
          let clientHeight = this.dom.clientHeight
          let scrollBottom = scrollHeight - scrollTop - clientHeight
          if (scrollBottom < 1) {      // 这里就是滚动条滚动到底部的时候
        // 获取到的不是全部数据当滚动到底部继续获取新的数据

        // 这里记住我们要把表格渲染的数据和获取到的全部数据分开, 等滑动到底部时我们在取10或者20条添加到渲染数据上
        if (this.workforceTemDataAll.length <= this.workforceTemDataCurrect.length) return  // 因为我们默认都是渲染20条数据,如果总数据没那么多就直接return出去
        this.loading = true  // 开启loading效果防止渲染速度慢用户乱点,导致页面崩溃

        if (this.workforceTemDataCurrect.length + 10 > this.workforceTemDataAll.length) {
          // 如果workforceTemDataAll和workforceTemDataCurrect选差没有十条那么就全部渲染上去
          this.dom.scrollTop = this.dom.scrollTop - 30   // 30 50 都行
          this.workforceTemDataCurrect.push(...this.workforceTemDataAll)
        } else {
          this.dom.scrollTop = this.dom.scrollTop - 30
          let id = this.workforceTemDataCurrect.length
          // 这里取10条,渲染上去 拿多少数据循环多少次就行
          for (let index = id - 1; index <= id + 9; index++) {  // 没有用forEach 因为场景不同这里用 forEach 效率会低
            this.workforceTemDataCurrect.push(this.workforceTemDataAll[index])
          }
        }

        setTimeout(() => {
          this.loading = false
        }, 500)

      }
    })
  }

注意在子组件中调用时要使用$nextTick函数