el-select组件分页加载+远程搜索

1.新建js文件，封装自定义指令（判断select下拉是否到底部）

selectLoadmore.js

export default {
    bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        DOM.addEventListener('scroll', function() {
          /**
            * scrollHeight 获取元素内容高度(只读)
            * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
            * clientHeight 读取元素的可见高度(只读)
            * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
            * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
            */
          const condition = this.scrollHeight - this.scrollTop -0.8 <= this.clientHeight
          if (condition) {
            binding.value()
          }
        })
      }
  }

select.js

import selectLoadmore from './selectLoadmore'

const install = function(Vue) {
  Vue.directive('selectLoadmore', selectLoadmore)
}

if (window.Vue) {
  window['selectLoadmore'] = selectLoadmore
  Vue.use(install);
}

selectLoadmore.install = install
export default selectLoadmore

2.vue页面应用自定义指令

import selectLoadmore from '@/directive/selectLoadmore'

3.注册自定义指令（与components,mounted,methods同级位置）

directives: { selectLoadmore },

4.data

data(){
    return {
        query: {
            page: 1,
            limit: 15,
            queryMode:'page',
            status:'1',
            param:undefined
        },
        userOptions: [],
        userList:[],
        filterText: ''
    }
}

5.定义指令触发函数

loadMore(firstTag) {
    this.query.page++
    this.getOptions()
 },

6.定义模糊查询方法（后台接口需支持模糊查询）

filterVmModel (value) {
      this.query.param = value
      this.query.limit = 15
      this.query.page = 1
      this.userOptions = []
      this.getOptions()
}

7.查询接口

getOptions() {
      list(this.query).then(response => {
        this.userList = response.data
        this.userOptions.push(...this.userList)
      })
 }

8.组件使用

<el-select v-model="XXXXXX" v-selectLoadmore="loadMore" :filter-method="filterVmModel">
    <el-option v-for="item in userOptions" :key="item.id" :label="item.username" :value="item.id" />
 </el-select>

9.完整示例

<template>
  <div class="app-container">
    <h1>用于查询人员的下拉选择器的示例</h1>
    <el-select v-model="userId" v-selectLoadmore="loadMore" :filter-method="filterVmModel" filterable clearable>
      <el-option v-for="item in userOptions" :key="item.userId" :label="item.nickName" :value="item.userId" />
    </el-select>
    <span>{{userId}}</span>
  </div>
</template>

<script>
  import {listUser} from "@/api/system/user";
  import selectLoadmore from '@/plugins/selectLoadmore'
  export default {
    name: "elselect",
    directives: { selectLoadmore },
    data() {
      return {
        userId: '',
        query: {
          pageNum: 1,
          pageSize: 10,
          deptId: 1,
          reasonable: false
        },
        userOptions: [],
        userList: [],
        filterText: ''
      };
    },
    created() {
      this.getUser()
    },
    methods: {
      //查询接口
      getUser() {
        listUser(this.query).then(response => {
          this.userList = response.rows
          this.userOptions.push(...this.userList)
        })
      },
      //定义模糊查询方法所需的参数（后台接口需支持模糊查询）
      filterVmModel(value) {
        console.log(value)
        this.query.nickName = value
        this.query.pageNum = 1
        this.query.pageSize = 10
        this.query.deptId = 1
        this.query.reasonable = false
        this.userOptions = []
        this.getUser()
      },
      //定义指令触发函数
      loadMore(firstTag) {
        this.query.pageNum++
        this.getUser()
      },
    },
  };
</script>