element 中的el-table 和上拉加载的配合使用（只在单页面中使用）

1.  在要使用的页面里自定义指令（和created同级）

 directives: {
    loadmore: {
      // 指令的定义
      bind(el, binding) {
        const selectWrap = el.querySelector('.el-table__body-wrapper');
        selectWrap.addEventListener('scroll', function () {
          const sign = 100;
          const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;
          if (scrollDistance <= sign) {
            binding.value();
          }
        });
      },
    },
  },

2. 在h5页面内添加定义的方法名

  <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            row-key="userId"
            v-loadmore="getNewData"
            v-loading="loading"
            style="width: 100%"
            max-height="500"
            @selection-change="handleSelectionChange"
          >

3.  在data中定义一个开关，判断是否加载结束

data() {
    return {
      tableData: [],
      searchData: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      loading: true,
      flag: false, // 控制点击部门 上拉
    };
  },

4.  在methods 里写入方法

// 上拉刷新
    getNewData() {
        if (this.flag === true) {
          this.flag = false;
          this.searchData.pageNo++;
          this.getChildrenList(this.themeId);
        }
    },


// 获取人员列表
   getChildrenList(id) {
      let that = this;
      let param = {
        keyword: this.keyword,
        page: this.searchData.pageNo,
        limit: this.searchData.pageSize,
        searchParams: {
          deptId: id,
          mobile: '',
        },
      };
      selectList(param).then(res => {
        if (res.data.code === '200') {
          if (that.searchData.pageNo === 1) {
            that.tableData = res.data.data.uliteEmployeeVos;
          } else {
            this.tableData.push(...res.data.data.uliteEmployeeVos);
          }
          that.flag = true;
          that.loading = false;
          if (res.data.data.uliteEmployeeVos.length < this.searchData.pageSize) {
            that.flag = false;
          }
        } else {
          this.$message.warning(res.data.msg);
        }
      });
    },