element-ui输入框实现滚动触底翻页

template部分：

<el-autocomplete
  prefix-icon="el-icon-search" // 输入框头部图标
  v-model="engineeringName"  // 绑定的值
  :fetch-suggestions="getProjectName"  // 第一次调用回调函数
  placeholder="请选择工程名称"
  @select="handleSelect"  // 选中后调用的事件
  :scrollBottom="handleScrollBottom" // 滚动触底触发回调函数
>
  <template slot-scope="{ item }"> // 插槽展示名称
    <div>
      <p class="orgFullName" :title="item.constructionBidName">
        {{ item.constructionBidName }}
      </p>
    </div>
  </template>
</el-autocomplete>

javaScript部分：

    // 第一次调用的回调
    // pageNo：页码
    // pageSize： 每页条数
    // pageTotal： 总页码
    getProjectName(queryString, callback) {
      this.pageNo = 0;
      const PARAMS = {
        parentProjectId: this.$route.query.etag,
        pageNo: this.pageNo,
        pageSize: 10
      };
      getList(PARAMS).then(res => {
        if (res.status === 200) {
          const { code, data, message } = res.data;
          if (code === "0") {
            const list = data.rows || [];
            this.pageTotal = data.recordsTotal / 10;
            if (this.pageNo < this.pageTotal) {
              this.pageNo++;
            }
            callback(list);
          } else {
            this.$message.error(message);
          }
        }
      });
    },

    // 第二次调用回调
    handleScrollBottom(data, callback) {
      if (this.pageNo > this.pageTotal) return; // 当前页码大于总页码退出回调

      let params = {
        shortName: this.$route.query.etag,
        pageNo: this.pageNo,
        pageSize: 10
      };
      getList(params)
        .then(res => {
          if (res.status === 200) {
            let { code, data, message } = res.data;
            if (code === "0") {
              const list = data.rows || [];
              this.pageNo++; // 页码++
              callback(list);
            } else {
              this.$message.warning(message);
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },