elementUI select分页请求

DOM

   <el-select v-model="ruleForm.Id" :remote-method="userRemoteMethod" :loading="personLoading" :clearable='true'
        :filterable='true' :remote='true' style="width: 300px;" v-el-select-loadmore="loadmore" :reserve-keyword="true">
        <el-option v-for="item in personOptions" :key="item.Id" :label="item.Value" :value="item.Id"
          style="width: 300px;" />
      </el-select>

data

 personLoading: false,
        personOptions: '',
        categoryURl: {
          value: '',
          page: 1,
          rows: 30,
        },

方法

 mounted() {
      this.loadcategory();
    },
    methods: {
      // 远程搜索
      userRemoteMethod(query) {
        if (query !== '') {
          this.personLoading = true
          this.categoryURl.value = query
          this.categoryURl.page = 1
          this.personOptions = []
          this.getUserList()
        } else {
          this.personOptions = [];
          this.loadcategory()
        }
      },
      // 调用接口查询数据
      getUserList() {
        let params = {
          "page": this.categoryURl.page,
          "rows": 30,
          "sort": "CreateTime",
          "order": "desc",
          "wheres": "[{\"name\":\"Type\",\"value\":\"103\",}]"
       

        }


        this.http.post("接口", params, true).then(result => {
          console.log(result, 'resultgetUserList')
          this.personLoading = false;
          this.personOptions = [...this.personOptions, ...result.rows];

        })
      },
      // 远程搜索列表触底事件
      loadmore() {
        this.categoryURl.page++;
        this.getUserList();
      },

      //废物类别请求
      loadcategory() {
        let params = {
          "page": 1,
          "rows": 30,
          "sort": "CreateTime",
          "order": "desc",
          "wheres": "[{\"name\":\"Type\",\"value\":\"103\",}]"
        }
        this.http.post("接口", params, true).then(result => {
          console.log(result, 'resultloadcategory')
          this.personOptions = [...this.personOptions, ...result.rows];

        })
      },

新建directive.js

import elSelectLoadmore from './elSelectLoadmore';
const install = function(Vue) {
  Vue.directive('el-select-loadmore', elSelectLoadmore);
};
export default install;

新建elSelectLoadmore.js

export default {
  inserted(el, binding, vnode) {
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    SELECTWRAP_DOM.addEventListener('scroll', function() {
      const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
      if (condition) {
        binding.value();
      }
    });
  }
};

main.js

import elementDirective  from '../src/utilities/directive.js'
Vue.use(elementDirective)