vue2 el-select懒加载封装

//父组件 组件使用 import UserSelect from 'userSelect'
 <user-select :value.sync="formPeopleData.securityLiableUserId" :default-user="securityLiableRealName" />

 <!-- userSelect 子组件  -->
<template>
 
  <div>
    <!--  //自定义指令（懒加载功能指令），loadmore懒加载调用的函数
      获取焦点时第一次执行查询 -->
    <el-select
      ref="mylazy"
      v-model="itemCode"
      v-select-loadmore="loadmore"
      filterable
      remote
      :remote-method="searchUser"
      :loading="loading"
      clearable
      placeholder="请选择"
      style="width: 100%;"
      @focus="mygetItem"
    >
      <el-option
        v-for="item in userList"
        :key="item.id"
        :label="item.realName"
        :value="item.id"
      />
    </el-select>
  </div>
</template>
<script>
import debounce from 'lodash.debounce'
export default {
  name: 'DeviceUserInfo',
  // 自定义指令
  directives: {
    'select-loadmore': {
      bind (el, binding) {
        // 下拉框对象
        const SELECTWRAP_DOM = el.querySelector(
          '.el-select-dropdown .el-select-dropdown__wrap'
        )
        // 给下拉框增加滚动监听，
        SELECTWRAP_DOM.addEventListener('scroll', function () {
          // scrollHeight:当前所有选项的高度
          // scrollTop:滚动的距离
          // clientHeight:下拉框的高度

          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
          // 当滚动条滚动到最底下的时候执行接口加载下一页
          if (condition) {
            binding.value()
          }
        })
      }
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    defaultUser: {
      type: Array,
      default () {
        return []
      }
    }

  },
  data () {
    return {
      currentVal: '', // 选中值
      // userList: this.$store.state.userList,
      loading: false, // 加载中状态开关
      itemCode: '', // Select绑定数据
      userList: [], // Select选项
      stopLoading: false, // 加载开关，加载所有后端数据后控制懒加载是否继续执行，通过后端返回数据来控制
      pageData: { // 懒加载相关参数，这里代表从第一条数据开始加载，一次加载20项
        pageNumber: 1,
        pageSize: 20
      }
    }
  },
  watch: {
    itemCode (val) {
      this.$emit('update:value', val)
    },
    value (val) {
      this.itemCode = val
    },
    defaultUser: {
      handler (val) {
        if (Array.isArray(val) && val.length > 0) {
          this.userList.push(...val)
        }
      },
      deep: true
    }
  },
  created () {},
  mounted () {},
  methods: {
    loadmore () {
      if (!this.stopLoading) {
        this.pageData.pageNumber++// 搜索下一页
        // this.$refs.mylazy.query 获取当前搜索的字符
        this.mygetItem(this.$refs.mylazy.query, true) // 调用后端接口获取下拉框数据，此时第二个参数必须传 true，懒加载方式调用后端接口函数
      }
    },
    /**
    *  API函数，从后端获取数据，给下拉选项重新赋值
    * val： 是字符串且不为空时是模糊搜索，是对象时是第一次获取焦点调用
    * lazy: 懒加载时传 true
    * return  无
    */
    mygetItem (val, lazy = false) {
      this.loading = true // 调用API前设置加载状态为true
      const param = { pageNo: this.pageData.pageNumber, pageSize: this.pageData.pageSize } // 加载页和每页数据
      if (lazy === false) { // 如果不是懒加载，
        this.userList = [] // 把select选项数组重置为空
        param.pageNo = 1 // 设置查询第一页，每页20条
        param.pageSize = 20
      }

      // 本函数在搜索时调用会自动传入搜索内容（val)，是字符串，此时使用远程搜索方式
      if (typeof (val) === 'string') {
        param.searchKeyword = val
        param.searchName = 'real_name' // 指定搜索的类型是real_name
        this.$axios.post('/ams/platform/user/listPage', param).then((res) => {
          this.loading = false // 接口调用成功，把加载状态改为true

          const totalCount = res.data.totalCount
          // 停止加载，当后端没用发送总页数，或者后端总页数小于等于当前请求页数时，说明没用更多数据，关闭懒加载开关停止加载。
          if (!totalCount) {
            this.stopLoading = true // 设置停止懒加载为true
            // 直接停止执行，否则会导致下面的网络请求数据处理添加导致重复数据
          }
          // 网络请求数据处理
          this.userList = [...this.userList, ...res.data.list]
        }).catch((err) => { // 请求错误处理
          this.$message({
            message: err,
            type: 'warning'
          })
        })
      } else { // 如果是获取焦点调用本函数（第一次调用），参数val不是字符串，而是对象，此时直接查询第一页数据
        param.pageNo = 1
        param.pageSize = 20
        // 这里很重要，获取焦点第一次加载时打开懒加载开关，否则一个页面多个懒加载的的话会导致一个懒加载关闭其他都不能懒加载了。
        this.stopLoading = false
        this.$axios.post('/ams/platform/user/listPage', param).then((res) => {
          this.loading = false
          this.userList = res.data.list
        }).catch((err) => {
          this.$message({
            message: err,
            type: 'warning'
          })
        })
      }
    },
    searchUser: debounce(function (val) {
      this.mygetItem(val)
    }, 1000)

  }
}
</script>
<style scoped></style>