表格滚动分页查询

1.给表格添加id，height="100%"是固定表头

<el-table

            id="attr-table-box"

            height="100%"

            :row-style="{ height: '66px' }"

            style="width: 100%; height: 100%; "

          >

2.使用计算属性获取总页数

 computed: {

    //  表格总页数,控制滚动查询 attrTotal是数据总数;

    attrTotalPage() {

      return Math.ceil(this.attrTotal / this.queryParamsAttr.pageSize);

    },

  },

3.主要方法

// 属性表格绑定滚动事件,滚动分页查询
    queryByScroll() {
      const _this = this;
      const tableScrollDom =
        document.getElementById("attr-table-box").childNodes[2];
      tableScrollDom.addEventListener("scroll", function () {
        const scrollTop = tableScrollDom.scrollTop;
        const clientHeight = tableScrollDom.clientHeight;
        const scrollHeight = tableScrollDom.scrollHeight;
        if (scrollTop + clientHeight == scrollHeight) {
          // 滚动到底部
          if (_this.attrTotalPage > _this.queryParamsAttr.pageNum) {
            // 如果当前还没到最后一页,滚动到底部以后继续查询
            _this.queryParamsAttr.pageNum++;
            // 请求数据
            _this.getAttrData();
          }
        } else {
        }
      });
    },

4.在mounted里调用

 mounted() {

     this.queryByScroll();

  },