vue + element table数据过多实现懒加载与不同参数显示不同数据处理方法

全局指令

Vue.directive('loadmore', {
	bind (el, binding) {
	  var p = 0;
	  var t = 0;
	  var down = true;
	  var selectWrap = el.querySelector('.el-table__body-wrapper')
	  selectWrap.addEventListener('scroll', function () {
		//判断是否向下滚动
		p = this.scrollTop;
		// if ( t < p){down=true}else{down=false}
		if (t < p) {
		  down = true;
		} else {
		  down = false;
		}
		t = p;
		//判断是否到底
		const sign = 3;
		const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
		if (scrollDistance <= sign && down) {
		  binding.value()
		}
	  })
	}
  })

  // 重置
    resetQuery() {
      this.resetForm("jf00201FormRef");
      this.search1();
    },
    // 按条件查询方法
    search1() {
      this.jf00201Form.pageNum = 1;
      this.search();
    },
    // 查询
    search() {
      this.loading = true;
      var date = new Date(this.jf00201Form.date);
      var year = date.getFullYear();
      const mon = date.getMonth() + 1;
      var month = mon < 10 ? "0" + mon : mon;
      this.jf00201Form.month = month + "";
      this.jf00201Form.year = year + "";
      this.$http
        .post("/cw/jiefei/jf00201", this.jf00201Form)
        .then((res) => {
          if (this.jf00201Form.pageNum === 1) {
            // 滚动条回到顶部
            this.$nextTick(() => {
              this.$refs.table.bodyWrapper.scrollTop = 0;
            });
         // 重置表格数据
            this.tableData = [];
            this.tableData = res.rows;
          } else {
            this.tableData = this.tableData.concat(res.rows);
          }
          // 计算总页数
          this.totalPages = Math.ceil(res.total / this.jf00201Form.pageSize);
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 加载方法
    loadmore() {
      // 这里一定要加入判断，判断是不是还在上一个loading中，实现防抖
      if (!this.loading) {
        this.loading = true;
        if (this.jf00201Form.pageNum < this.totalPages) {
          this.jf00201Form.pageNum++;
          this.search();
        } else {
          this.msgInfo("没有更多了");
          this.loading = false;
        }
      }
    },